Laravel8+Vue2配置@websanova/vue-auth报http插件未设置错误如何解决

错误原因排查 #

你出现报错的核心原因有2个：

• 没有正确注册axios和VueAxios插件，导致Vue.axios未定义，vue-auth读取不到http实例
• auth.js配置层级错误，将登录、拉取用户等全局配置错误嵌套到了drivers字段内部
• 配置加载顺序错误，注册VueAuth前未完成axios、router的挂载，导致auth配置读取时对应属性为空

第一步：修正app.js文件 #

如果还没安装axios依赖，先执行npm install axios，再按如下代码调整：

import 'core-js/stable'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios' // 新增引入axios
import VueAxios from 'vue-axios'
import CoreuiVue from '@coreui/vue'
import { iconsSet as icons } from './assets/icons/icons.js'
import store from './store'
import VueAuth from '@websanova/vue-auth/dist/v2/vue-auth.esm.js';

// 先注册VueAxios和axios，保证Vue.axios可访问
Vue.use(VueAxios, axios)
// 挂载router到Vue原型，保证auth.js能读取到Vue.router
Vue.router = router

// 注册完axios和router之后再引入auth配置，避免读取属性为空
import auth from './auth';

Vue.prototype.$apiAdress = 'http://127.0.0.1:8000'
// 给axios设置全局接口前缀，避免vue-auth请求路径错误
axios.defaults.baseURL = Vue.prototype.$apiAdress
Vue.config.performance = true
Vue.use(CoreuiVue)
Vue.use(VueAuth, auth)

new Vue({
  el: '#app',
  router,
  store,  
  icons,
  template: '<App/>',
  components: {
    App
  },
})

第二步：修正auth.js配置层级 #

把原本嵌套在drivers里的业务配置提到顶级，和plugins、drivers平级：

import Vue from 'vue'
import bearer from '@websanova/vue-auth/dist/drivers/auth/bearer.esm'
import axios from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm';
import router from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm';

const config = {
    plugins: {
        http: Vue.axios,
        router: Vue.router,
    },
    drivers: {
        auth: bearer,
        http: axios,
        router: router,
    },
    // 下面这些配置从原drivers嵌套结构中移出，平级放置
    tokenDefaultName: 'token',
    tokenStore: ['localStorage'],
    rolesVar: 'role',
    loginData: {url: 'login', method: 'POST', redirect: '/dashboard', fetchUser: true},
    logoutData: {url: 'logout', method: 'POST', redirect: '/login', makeRequest: true},
    fetchData: {url: 'user', method: 'GET', enabled: true},
    refreshData: {url: 'refresh', method: 'GET', enabled: true, interval:30 },
    authRedirect: { path: '/' },
    parseUserData(response){
        let data = response.data;
        data.refresh = response.refresh_token;
        localStorage.setItem("user", JSON.stringify(data));
        return data;
    },
    options: {
        rolesKey: 'type',
        notFoundRedirect: {name: 'user-account'},
    }
}

export default config

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