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() //放行
})
`