解决vue-router addRoutes多次添加路由重复问题

最新推荐文章于 2024-05-16 11:26:58 发布

脚步，不曾停下

最新推荐文章于 2024-05-16 11:26:58 发布

阅读量7.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue vue-router

本文链接：https://blog.csdn.net/weixin_43010562/article/details/109177348

vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

vue-router

1 篇文章

订阅专栏

本文探讨如何解决在vue-router中使用addRoutes时遇到的重复添加路由的问题，主要集中在router.js和permission.js的权限控制策略上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决vue-router addRoutes多次添加路由重复问题

在router.js中

import Vue from 'vue'
import Router from 'vue-router'

const routes = [
	{ path: '/', redirect: '/home'},
	{ path: '/login', name: 'login', component: r => { require(['../components/login'], r) }, meta: { title: 'client 登录' }},
]

Vue.use(Router)
//创建方法
const createRouter = () => new Router({
  mode: 'hash',
  routes: routes
})

const router = createRouter()
  
  export function resetRouter () {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // the relevant part
  }
  
  export default router

在相应权限控制即 permission.js中，

import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
// import { getToken } from '@/utils/auth' // getToken from cookie
import { toTree } from '@/utils'
import { getToken } from '@/utils/auth'

NProgress.configure({ showSpinner: false })// NProgress Configuration

const whiteList = ['/login']

// permission judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

router.beforeEach((to, from, next) => {
  NProgress.start()
  if (getToken()) {
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/home' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => {
          // 拉取user_info
          const roles = res.roles
          store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
            // 根据roles权限生成可访问的路由表
            router.addRoutes(accessRoutes); // 动态添加可访问路由表
            if(to.path === '/home'){
              next()
            }else{
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
            }
          })
        })
          .catch(err => {
            store.dispatch('LogOut').then(() => {
              next({ path: '/login' })
            })
          })
      } else {
        if(to.matched.length === 0){ //没找到相应匹配
          next({ path: '/404', })
        }else {
          next()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})