vue动态路由-后端接口

最新推荐文章于 2025-10-13 21:13:08 发布

原创最新推荐文章于 2025-10-13 21:13:08 发布 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue路由 #vue权限 #vue动态路由

javascript 同时被 3 个专栏收录

20 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍了一种基于用户权限动态加载路由的方法，通过store.dispatch('GetInfo')获取用户信息，利用递归函数为每个菜单项添加组件，实现权限数据的动态更新。同时，将自定义的权限数据与现有路由合并，确保路由加载的完整性和安全性。

*通过获取后台用户信息的权限来进行路由的动态加载

store.dispatch('GetInfo').then(res => { // 拉取用户信息
          let permissionData = tool.deepCopy(store.getters.permission)
          let getData = (obj) => {
            if(obj.children) {
              obj.children.forEach((item) => {
                item.component = _import(item.component)
                getData(item)
              })
            }
          }

          //递归进行路由菜单添加
          permissionData.forEach((item) => {
            item.component = Layout
            item.alwaysShow = true
            getData(item)
          })
          permissionData.push({ path: '*', redirect: '/404', hidden: true })
          router.options.routes = router.options.routes.concat(permissionData)
          router.addRoutes(permissionData)
          next({ ...to, replace: true })//确保addRoutes完成
        }).catch((error) => {
          store.dispatch('FedLogOut').then(() => {
            Message.error('验证失败,请重新登录')
            next({ path: '/login' })
          })
          NProgress.done() // 结束Progress
        })