-
定义路由
const routes=[{path: '/page',name: "dashboard",redirect: '/page/home',meta: {title: "首页",},component: () => import('@/components/layout/index.vue'),children: [{path: 'home',name: "home",meta: {title: "仪表盘",role: [1,2,3,4,5]},component: () => import("@/pages/home/index.vue"),},{path: 'application-form-list',name: "application-form-list",redirect: '/page/application-form-list/application-list',meta: {title: "申请表列表",role: [2]},component: () => import("@/components/childView.vue"),children: [{path: 'application-list',name: "application-list",meta: {title: "",role: [1,2,3]},component: () => import("@/pages/applicationFormList/index.vue"),},{path: 'application-history',name: "application-history",meta: {title: "历史申请",role: [2]},component: () => import("@/pages/applicationFormList/historyList.vue"),}]}]
]role:定义拥有该页面权限的用户
-
创建路由
const router = createRouter({ history:'...',routes})-
创建导航守卫
router.beforeEach(async(to, from, next) => {if (to.path !== '/login') {const userInfo=xxx;//用户数据const menuList=[...]//菜单、路由数组const role=xxx//用户权限const hasRole=to.meta.role.indexOf(role)if(hasRole==-1){//无访问权限if(to.path=="/page/home"&&menuList.length>0){//首页没有权限重定向return next(menuList[0].path)}else{//跳转无权限页面return next('/page/permission')}}if(!userInfo) {return next('/login')}}next()
})
