vue3做路由权限管理笔记_vue3 动态路由导航菜单权限管理

vue3.0做路由权限

->(1)首先在vuex里面调用用户信息接口

(*代码如下)

`

const store = createStore({
     state() {
        return {
         //用户信息
        user:{},
        
         //定义左侧菜单列表数据
         menus:[],
         
         //路由名称
         ruleNames:[]
        }
     },
     mutations:{
        //定义修改左侧菜单数据
        SET_MENUS(state , menus) {
           state.menus = menus
        },
        
        //定义修改左侧路由名称的数据
        SET_RULENAMES(state , ruleNames) {
           state.ruleNames = ruleNames
        }
     }
     actions:{
        //获取当前登录用户信息
        getinfo({ commit }) {
          return new Promise((resolve,reject) => {
          getinfo().then(res => {
          
            commit("SET_USERINFO",res)
            
            //存储用户信息
            commit("SET_MENUS",res.menus)
            
            //把左侧菜单数据存入
             commit("SET_RULENAMES",res.ruleNames) //把路由名称存入
            
            //请求成功调用
            resolve(res)
          }).catch(err => reject(err))
         })
       }
     }
 })

`

(2) ->找到router文件夹中的index.js文件

(*做法) `

在router/index.js中留下*首页路由
*登录路由,*404路由,*其余的路由全部移除
在创建一个动态路由把其余的路由移到里面去

(*具体代码)`

`

import { createRouter , createWebHistory } from 'vue-router'
 
import Layout from "@/views/Home/index.vue" //项目总组件
import NotFound from "@/views/404.vue"      //404组件
import Login from "@/views/Login/index.vue" //登录组件
import Index from "@/Layout/index.vue" //首页组件
import GoodList from "@/views/goods/list.vue" //导入商品列表组件
import CategoryList from "@/views/category/list.vue" //分类管理
 
 
<!-- 静态路由 -->
//默认路由所有用户共享(首页路由,登录路由,404路由)
 
const routes = [
   {
     path:'/',
     name:"Index",
     component:Index,
    },
    {
     path:'/login',
     name:'Login',
     component:Login,
     meta:{
      title:'登录'
      }
    },
    
    <!-- 配置404页面-->
    {
     path:'/:pathMatch(.*)*', 
     name:'NotFound', 
     component:NotFound 
    }
]
 
*** <!-- 动态路由 -->
 
<!--添加动态路由的数组(用于匹配动态菜单添加动态路由的)-->
 
const asyncRoutes = [
  {
    path:'/',
    name:"/",
    component:Index,
    meta:{
      title:'首页'
    }
  },
  {
    path:'/goods/list',
    name:"/goods/list",
    component:GoodList,
    meta:{
     title:'商品管理'
    }
   },
   {
    path:'/category/list',
    name:'/category/list',
    component:CategoryList,
    meta:{
     title:'分类管理'
    }
   }
]
 
export const router = createRouter({
     history:createWebHistory(),
     routes
 })
 
 
<!--使用递归算法添加路由权限-->
export function addRoutes (menus) {
   //是否有新的路由(解决加载到路由导航守卫里面出现死循环问题)
   
   let hasNewRoutes = false
   
   <!-- 使用递归算法-->
   <!-- 添加动态路由的方法: router.addRoute()-->
   
   const findAndAddRoutesByMenus = (arr) => {
        arr.forEach(e => {
         let item =  asyncRoutes.find(o => o.path == e.frontpath)
         if(item && !router.hasRoute(item.path)) {
         router.addRoute("Index",item)
         hasNewRoutes = true
     }
        <!-- 是否有子路由-->
        if(e.child && e.child.length > 0){
        findAndAddRoutesByMenus(e.child)
       }
     })
   
    }
   
    findAndAddRoutesByMenus(menus)
    return hasNewRoutes
}

`

(*把main.js的路由导入方式改掉)

改成 import { router } from './router'

(*把permission的路由导入方式改掉) `

改成:import { router , addRoutes } from "./router"

`

->(3)在导航守卫里面开始调用路由的权限管理代码

(*permission代码如下:)

`

import { router , addRoutes } from "./router"
 
<!--全局前置守卫-->
 router.beforeEach(async(to , from , next) => {
     
     let hasNewRoutes = false
     if(token && !hasGetInfo) {
        //调用用户接口
       // 解构menus
       let { menus } = await store.dispatch("getinfo")
       hasGetInfo = true
      //动态添加路由
 
        hasNewRoutes = addRoutes(menus)
     }
     
      hasNewRoutes ?  next(to.fullPath) : next() //放行
 })

`