VueJS中Vue-auth的$auth.user()页面重载后为空问题

我之前也碰到过类似的情况，页面重载后this.$auth.user()返回空，权限校验逻辑直接卡壳——其实核心原因很简单：页面刷新时Vue实例会重新初始化，存在内存里的用户信息会被清空，得把用户数据持久化存储起来，再在页面加载时恢复，给你几个具体的解决思路：

1. 确保用户信息持久化存储 #

不管你是用自定义的$auth插件还是第三方库，都要把用户信息存在localStorage或sessionStorage里，而不是只存在内存中：

自定义$auth插件的情况 #

如果是自己写的$auth，在登录成功时把用户信息存到本地存储，获取用户时先从本地读取：

// auth-plugin.js
const AuthPlugin = {
  install(Vue) {
    Vue.prototype.$auth = {
      // 读取用户时优先从localStorage获取
      user() {
        return JSON.parse(localStorage.getItem('currentUser')) || null
      },
      // 登录成功后持久化用户信息
      login(userData) {
        localStorage.setItem('currentUser', JSON.stringify(userData))
        // 其他登录逻辑（比如设置token等）
      },
      // 登出时清除本地存储
      logout() {
        localStorage.removeItem('currentUser')
      }
    }
  }
}

export default AuthPlugin

使用第三方Auth库的情况 #

比如用@websanova/vue-auth这类库，要配置storage选项让它自动持久化：

Vue.use(VueAuth, {
  auth: require('@websanova/vue-auth/drivers/auth/bearer.js'),
  http: require('@websanova/vue-auth/drivers/http/axios.1.x.js'),
  router: require('@websanova/vue-auth/drivers/router/vue-router.2.x.js'),
  storage: 'localStorage' // 指定用localStorage存储用户信息
})

2. 调整权限校验逻辑，处理用户为空的情况 #

修改你的checkPermissionOnRoute函数，先判断用户是否存在，再做权限校验，避免空值报错：

checkPermissionOnRoute() {
  const currentUser = this.$auth.user()
  
  // 先判断用户是否已登录，未登录直接跳登录页
  if (!currentUser) {
    this.$router.push('/login')
    return
  }

  const requiredPermission = this.$route.meta.permission
  if (requiredPermission) {
    // 权限不匹配时的处理
    if (!currentUser.permission || !requiredPermission.includes(currentUser.permission)) {
      console.log('权限不足')
      this.$router.push('/no-permission') // 跳转到无权限页面
    }
  }
}

3. 改用路由守卫做全局权限校验 #

比起在组件内部调用校验函数，用全局路由守卫会更可靠——它能在路由跳转前就完成校验，避免页面加载后才发现权限问题：

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 你的路由配置，记得给需要权限的路由加meta.permission
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { permission: ['admin', 'editor'] }
    }
  ]
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const currentUser = Vue.prototype.$auth.user()
  
  // 不需要权限的路由直接放行
  if (!to.meta.permission) {
    next()
    return
  }

  // 未登录跳转登录页
  if (!currentUser) {
    next('/login')
    return
  }

  // 校验权限
  if (!currentUser.permission || !to.meta.permission.includes(currentUser.permission)) {
    next('/no-permission')
  } else {
    next()
  }
})

export default router

这样调整后，页面重载时用户信息会从本地存储恢复，权限校验就能正常执行啦～

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