在使用vue做管理系统时通常会有有权限分级,普通用户和管理员用户等等的设置.
碰巧遇到了一个项目,具体分析分析.
//导入不同角色路由
import { userRouter } from './userRouter'
import { adminRouter } from './adminRouter'
//组合式api写法
import { createRouter, createWebHistory } from 'vue-router'
//取出权限判断是否为管理员
const isadmin: any = localStorage.getItem('isadmin')
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/login',
component: () => import('@/views/login/index.vue')
},
{
path: '/register',
component: () => import('@/views/register/index.vue')
},
{
path: '/:pathMatch(.*)',
component: () => import('@/views/404/index.vue')
}
]
})
//添加路由
if (Number(isadmin)) {
router.addRoute(adminRouter)
} else {
router.addRoute(userRouter)
}
在用户登录之后将权限存到localStorage当中根据根据不同的权限数字来动态的添加路由
普通用户路由
//用户路由规则的路由表
export const userRouter = {
path: '/',
name: 'abc',
component: () => import('@/components/layout-v2/index.vue'),
redirect: '/home',
children: [
{
//首页
path: 'home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '图书借阅平台-首页'
}
},
{
//个人中心
path: 'user',
component: () => import('@/views/user/index.vue'),
meta: {
title: '图书借阅平台-个人中心'
}
},
{
//图书借阅
path: 'lending',
component: () => import('@/views/book-lending/index.vue'),
meta: {
title: '图书借阅平台-图书借阅'
}
},
{
//图书归还
path: 'restore',
component: () => import('@/views/book-restore/index.vue'),
meta: {
title: '图书借阅平台-图书归还'
}
},
{
//图书检索
path: 'search',
component: () => import('@/views/booksearch/index.vue'),
meta: {
title: '图书借阅平台-图书借阅'
}
},
]
}
管理员的
//管理员路由规则
export const adminRouter = {
path: '/',
name: 'abc',
component: () => import('@/components/layout/index.vue'),
redirect: '/home',
children: [
{
//首页
path: 'home',
component: () => import('@/views/home/index.vue'),
meta: {
title: '图书管理系统-首页'
}
},
{
//图书管理
path: 'book',
component: () => import('@/views/book-manage/index.vue'),
meta: {
title: '图书管理系统-图书管理'
}
},
{
//数据分析
path: 'data',
component: () => import('@/views/data/index.vue'),
meta: {
title: '图书管理系统-数据分析'
}
},
{
//个人中心
path: 'user',
component: () => import('@/views/user/index.vue'),
meta: {
title: '图书管理系统-个人中心'
}
},
{
//用户管理
path: 'usermanage',
component: () => import('@/views/user-manage/index.vue'),
meta: {
title: '图书管理系统-用户管理'
}
},
{
//类别管理
path: 'category',
component: () => import('@/views/category/index.vue'),
meta: {
title: '图书管理系统-类别管理'
}
},
{
//借阅管理
path: 'adminborrow',
component: () => import('@/views/admin-borrow/index.vue'),
meta: {
title: '图书管理系统-借阅记录'
}
}
]
}