vue-admin-template 新手學習（四） 頁面權限控制

1.創建vue實例的時候  掛載vue-router

2.用戶登錄後獲取role  將role和路由美國頁面權限比較 生成最終用戶可訪問的路由表

3.調用router.addRoutes 添加可訪問路由

4.使用vuex管理路由 根據vuex中可訪問路由渲染側邊欄組件

 

在router文件夾下有一個index.js文件 就是用來控制頁面權限的   template模板已經有了靜態路由在index.js文件裡邊

需要在此文件添加動態路由  怎麼menu沒有出現這個動態的側邊欄呢😭  繼續找找看為啥

ps：靜態路由 ：代表不需要動態判斷權限的路由

       動態路由：代表需要動態判斷權限並通過個的頁面

1.  在router文件夾下面的index.js增加動態路由

export const asyncRoutes = [
  {
    path:'/inquiry',
    component: Layout,
    alwaysShow: true,
    meta: {
      title: 'Inquiry',
      icon: 'lock',
      roles: ['admin']
    },
    children: [
      {
        path: 'create',
        component: () => import('@/views/inquiry/form'),
        name: 'CreateInquiry',
        meta: {
          title: 'CreateInquiry',
          icon: 'lock',
          roles: ['admin']
        }
      }
    ]
  }
]

  2. 因為是mock數據，所以要在mock下添加routes.js

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
    }]
  },

  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree'