Vue3.0+vue-router 实现权限路由方案一

• 定义路由

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()
})