vue路由权限及刷新当前页面跳转404的问题

vue实现权限路由：

首先路由要分为两部分，一部分为所有人可见，一部分为根据权限动态挂载。

/**
 * constantRoutes
 * 所有权限通用路由表
 * 如首页和登录页和一些不用权限的公用页面
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {title: '首页', icon: 'dashboard'}
    }]
  },
  /*  404 页面必须放在最后 !!! */
  // {path: '*', redirect: '/404', hidden: true}
]

/**
 * 异步路由表，权限控制显示
 * @type {any}
 */
export const asyncRoutes = []

路由具体内容这里就不过多展示了。

大致思路就是通过beforeEach钩子拦截当前路由，并在一定条件下挂载异步路由

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
  // 设置网页标题
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      // 如果已登录且跳转的页面是登录页，重定向到主页
      next({ path: '/' })
      NProgress.done()
    } else {
      const hasGetUserInfo = store.getters.name
      if (hasGetUserInfo) {
        next()
      } else {
        try {
          // 获取用户信息，获取到则加载权限路由否则抛出错误重定向到登录
          await store.dispatch('user/getInfo')
          if(store.getters.name){
            store.dispatch('user/GenerateRoutes').then(res=>{
              router.addRoutes([...res,{path: '*', redirect: '/404', hidden: true}])
              next({...to})
            })
          }
        } catch (error) {
          // 删除token并且重新定向到登录页
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // 处于登录白名单的路由，直接跳转
      next()
    } else {
      /**
       * 其他没有访问权限的页面将被重定向到登录页面
       * 登录成功之后将重定向到之前想跳转的页面
       */
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

上述例子挂载异步路由的条件时基于用户已登录，并且前端已拿到用户信息。用户信息里会有当前账户的权限，满足此条件后，调用vuex里的某个函数去处理并生成最终的路由表。

也可以不放在vuex中，例子中是因为要通过这个路由表去渲染导航，故就放在了vuex里集中管理。

拿到最终生成的路由表后，通过addRoutes函数，将异步路由表和基础路由表合并。并挂载。

这里有一个小细节，比如我们在登录后跳转到首页，首页是在基础路由表就存在的，所以我们这样做并无影响。

但是当我们在某个页面进行刷新操作的时候，此时钩子进入后的to对应的是刷新前的路由。

比如，我们在/user/userinfo路由下刷新页面，而恰好这个路由又是异步生成的，那么此时我们挂载好路由表后，而我们的基础路由里又刚好配置了404的路由；那此时就会重定向到404路由。

解决办法：
将404路由也放入异步路由表动态挂载，这样刷新页面后就不会重定向到404，而是会继续留在当前路由下

注意：router并不能获得addrouters添加进去的最新路由表，所以如果导航渲染的是router的数据那是没办法渲染出新的路由的，必须另外用一个变量存储整张新路由表

最后编辑于：2022.06.25 10:40:24