Vue3集成websanova/vue-auth未传Bearer Token、登录态失效问题

问题现象 #

• 按照官方文档完成 websanova/vue-auth 配置后，登录接口可正常调用返回成功
• 登录后触发的获取用户信息请求，请求头未携带 Authorization 字段（无Bearer Token）
• 页面刷新、路由跳转后 $auth.check() 返回false，认证状态丢失

相关代码与返回 #

auth.js 配置 #

import {createAuth}          from '@websanova/vue-auth/src/v3.js';
import driverAuthBearer      from '@websanova/vue-auth/src/drivers/auth/bearer.js';
import driverHttpAxios       from '@websanova/vue-auth/src/drivers/http/axios.1.x.js';
import driverRouterVueRouter from '@websanova/vue-auth/src/drivers/router/vue-router.2.x.js';
import driverOAuth2Google    from '@websanova/vue-auth/src/drivers/oauth2/google.js';
import driverOAuth2Facebook  from '@websanova/vue-auth/src/drivers/oauth2/facebook.js';

driverOAuth2Google.params.client_id = 'google-key';
driverOAuth2Facebook.params.client_id = 'facebook-key';

export default (app) => {
    app.use(createAuth({
        plugins: {
            http: app.axios,
            router: app.router,
        },
        drivers: {
            http: driverHttpAxios,
            auth: driverAuthBearer,
            router: driverRouterVueRouter,
            oauth2: {
                google: driverOAuth2Google,
                facebook: driverOAuth2Facebook,
            }
        },
        options: {
            rolesKey: 'type',
            notFoundRedirect: {name: 'notfound'},
            fetchData: { url: `auth/user`, method: 'GET', enabled: true, authType: 'bearer' },
            refreshData: { url: `auth/user`, method: 'GET', enabled: true, interval: 30, authType: 'bearer' },
            authType: "bearer",
        },
    }));
}

main.js 入口配置 #

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import auth from './plugins/auth.js';
import axios from './plugins/axios.js';

const app = createApp(App);
app.router = router

app.use(axios)
app.axios.defaults.baseURL = process.env.VUE_APP_API_URL;

app.use(ElementPlus)
app.use(router)

app.use(auth)
app.mount('#app')

登录逻辑代码 #

await auth.login({
    data: form,
    authType: "bearer",
    redirect: '/dashboard',
    fetchUser: true,
    staySignedIn: true,
    rememberMe: true,
})
.then(null, (res) => {
    errors(res.response);
});

登录接口返回结构 #

{
    "token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
    "data":{
        "id":3,
        "name":"john Doe",
        "email":"john@doe.com",
        "email_verified_at":null,
        "created_at":"2022-06-25T12:36:40.000000Z",
        "updated_at":"2022-06-25T12:36:40.000000Z"
    }
}

请求异常截图 #

问题根因 #

配置存在两处核心错误：

• 拦截器未生效：插件初始化顺序错误，vue-auth 需要在axios实例创建完成后立刻初始化，才能给axios挂载请求拦截器实现自动注入Token的逻辑。原代码中auth初始化在router、ElementPlus注册之后，拦截器没有正确挂载到axios实例，请求发出前未经过auth的拦截处理。
• Token未被正确解析存储：bearer 驱动默认从登录响应的 access_token 字段读取认证令牌，当前登录接口返回的Token字段名为 token，和默认配置不匹配，插件没有拿到有效Token做持久化存储，因此刷新页面后认证状态直接丢失，后续请求也无法携带Token。

修复步骤 #

1. 调整main.js中插件注册顺序，确保axios实例初始化完成后立刻初始化auth插件，再注册其他插件：

const app = createApp(App);
app.router = router

// 1. 先初始化axios实例
app.use(axios)
app.axios.defaults.baseURL = process.env.VUE_APP_API_URL;
// 2. 初始化auth，给已有的axios实例挂载认证拦截器
app.use(auth)
// 3. 再注册路由、UI组件等其他插件
app.use(ElementPlus)
app.use(router)

app.mount('#app')

2. 修改auth.js配置，补充Token字段映射，匹配后端接口返回结构：

options: {
    rolesKey: 'type',
    notFoundRedirect: {name: 'notfound'},
    // 指定从登录响应的token字段读取认证令牌
    tokenDefaultKey: 'token',
    fetchData: { url: `auth/user`, method: 'GET', enabled: true, authType: 'bearer' },
    refreshData: { url: `auth/user`, method: 'GET', enabled: true, interval: 30, authType: 'bearer' },
    authType: "bearer",
}

3. 校验axios实例一致性：确保./plugins/axios.js中创建的axios实例，和传给vue-auth的app.axios是同一个实例，避免出现拦截器挂载到A实例、发请求用B实例的情况。

修复完成后重新登录，即可看到用户信息请求自动携带Authorization: Bearer <token>请求头，刷新页面后$auth.check()也会正常返回true。

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