如何在Vue项目中获取Authorization请求头？含Nginx部署场景方案

因为Vue Router的beforeEach是客户端路由钩子，运行在浏览器环境中，无法直接获取页面初始加载时的HTTP请求头（浏览器出于安全限制不会暴露这类信息），结合你用Nginx做Basic认证的场景，有以下几种可行方案：

方案1：Nginx将Authorization头注入页面全局变量 #

通过Nginx修改返回的index.html，把Authorization头的值插入为浏览器全局变量，前端直接读取后再做存储或传递。

Nginx配置修改 #

在你的Vue项目对应的location块中添加以下配置：

location / {
    auth_basic "Restricted Area";
    auth_basic_user_file /path/to/.htpasswd;

    # 将Authorization头注入页面的全局变量
    sub_filter '</head>' '<script>window.__AUTH_TOKEN__ = "$http_authorization";</script></head>';
    sub_filter_once on;

    try_files $uri $uri/ /index.html;
}

sub_filter会替换index.html中的</head>标签，插入一段脚本定义全局变量window.__AUTH_TOKEN__，值为当前请求的Authorization头内容。

Vue项目中使用 #

在项目入口文件（比如main.js）中读取全局变量，再通过provide传递或存入状态管理：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
// 读取全局变量中的认证令牌
const authToken = window.__AUTH_TOKEN__ || '';
// 通过provide传递给子组件
app.provide('authToken', authToken);

app.use(router).mount('#app');

方案2：通过后端接口转发获取（若有后端服务） #

如果你的项目搭配后端API服务，可以让Nginx将Authorization头转发给后端，前端调用后端接口获取认证信息。

Nginx配置修改 #

在后端API的location块中添加头转发：

location /api/ {
    auth_basic "Restricted Area";
    auth_basic_user_file /path/to/.htpasswd;

    proxy_pass http://your-backend-server:port/;
    # 将Authorization头转发给后端
    proxy_set_header Authorization $http_authorization;
}

前端调用接口 #

前端发起请求到后端的认证信息接口（比如/api/get-auth-info），后端解析Authorization头后返回用户信息或令牌，前端再存储使用。

注意事项 #

• Basic认证的Authorization头格式为Basic [base64编码的用户名:密码]，若仅需标识用户身份，直接存储即可；若需获取用户名，可在前端对base64部分解码处理。
• 方案1中的全局变量仅在页面初始加载时注入，若后续路由切换（客户端路由）不会重新触发Nginx的认证，所以无需重复获取。

内容的提问来源于stack exchange，提问作者chudin26