import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'
Vue.use(VueRouter)
// 動(dòng)態(tài)路由規(guī)則
const tableRule = {
  path: '/table',
  name: 'table',
  component: () => import('@/views/table/index.vue')
}
const imageRule = {
  path: '/image',
  name: 'image',
  component: () => import('@/views/image')
}
const userRule = {
  path: '/users',
  name: 'users',
  component: () => import('@/views/users')
}
// 路由規(guī)則和字符串的映射關(guān)系
const ruleMapping = {
  table: tableRule,
  users: userRule,
  image: imageRule
}
//靜態(tài)路由
const routes = [
  {
    path: '/login',
    // name: 'login', // 這里如果有name 控制臺(tái)會(huì)提示
    component: () => import('@/views/login')
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        // name: 'home',
        component: () => import('@/views/home')
      },
      {
        path: '/chart',
        component: () => import('@/views/chart')
      }
    ]
  }
]
const router = new VueRouter({
  routes
})
//路由權(quán)限：用戶登錄后接口返回，存儲(chǔ)到本地緩存
const rightList = [
  {
    id: 1,
    authName: "基本頁面",
    icon: "el-icon-connection",
    children: [
      {
        id: 11,
        authName: "表格頁面",
        icon: "el-icon-s-grid",
        path: "table",
        rights: ["view", "edit", "add", "delete"]
      },
      {
        id: 12,
        authName: "素材頁面",
        icon: "el-icon-s-marketing",
        path: "image",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  },
  {
    id: 2,
    authName: "用戶權(quán)限",
    icon: "el-icon-set-up",
    children: [
      {
        id: 21,
        authName: "權(quán)限頁面",
        icon: "el-icon-s-custom",
        path: "users",
        rights: ["view", "edit", "add", "delete"]
      }
    ]
  }
];
//在登錄(login.vue)、頁面刷新（App.vue）的時(shí)候，調(diào)用initDynamicRoutes
export function initDynamicRoutes () {
  // 根據(jù)二級(jí)權(quán)限 對(duì)路由規(guī)則進(jìn)行動(dòng)態(tài)的添加
  const currentRoutes = router.options.routes
  rightList.forEach(item => { // 如果是沒有子路由的話 就直接添加進(jìn)去 如果有子路由的話就進(jìn)入二級(jí)權(quán)限遍歷
    if (item.path) {
      const temp = ruleMapping[item.path]
      // 路由規(guī)則中添加元數(shù)據(jù)meta
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    }
    item.children.forEach(item => {
      // item 二級(jí)權(quán)限
      const temp = ruleMapping[item.path]
      // 路由規(guī)則中添加元數(shù)據(jù)meta，用于按鈕權(quán)限控制
      temp.meta = item.rights
      currentRoutes[1].children.push(temp)
    })
  })
  // 添加路由規(guī)則
  router.addRoutes(currentRoutes)
}
export default router

<el-button v-permission="[$route.path, 'add']">添加</el-button>
directives: {
        // 檢測(cè)全選的指令
        permission: {
            // 綁定此指令的標(biāo)簽插入到dom節(jié)點(diǎn)觸發(fā)
            inserted(el, bind) {
                // el:綁定該指令標(biāo)簽
                // bind:對(duì)象格式 當(dāng)前綁定指令標(biāo)簽上的數(shù)據(jù)情況
                // 獲取按鈕上的value值，就是用戶當(dāng)前要使用的權(quán)限和請(qǐng)求的路由地址
                let value = bind.value//['/user','add']
                //模擬后端返回的當(dāng)前角色對(duì)應(yīng)的權(quán)限
                let rules = {
                    '/menu': ['add', 'edit'],
                    "/user": [ 'edit', 'remove'],
                    "/goods": ['add']
                }
                // 根據(jù)訪問的路由地址獲取該模塊的操作權(quán)限
                let allow = rules[value[0]]
                // 檢測(cè)當(dāng)前操作是否合法
                if (!allow.includes(value[1])) {
                    // 不合法隱藏操作按鈕
                    el.style = "display:none"
                }
            }
        }
 }

import axios from 'axios'
import router from '@/router'
const request = axios.create()
// 映射
const actionMapping = {
  get: 'view',
  post: 'add',
  put: 'edit',
  delete: 'delete'
}
// request.defaults.baseURL = 'http://127.0.0.1:7001' // 注釋掉之后調(diào)的接口將是Mock數(shù)據(jù)
// 請(qǐng)求攔截器
request.interceptors.request.use(req => {
  // console.log(req.url)
  // console.log(req.method)
  if (req.url !== '/login' && req.url !== '/roles') {
    // 不是登錄的請(qǐng)求 也不是獲取權(quán)限的請(qǐng)求 則在請(qǐng)求頭中加入token  不知道如何使用Mock來驗(yàn)證請(qǐng)求頭中的token 故此處注釋
    // req.headers.Authorization = sessionStorage.getItem('token')
    const action = actionMapping[req.method]
    // 判斷非權(quán)限范圍內(nèi)的請(qǐng)求
    // console.log(router)
    const currentRight = router.currentRoute.meta
    // console.log(currentRight)
    if (currentRight && currentRight.indexOf(action) === -1) {
      // 沒有權(quán)限
      alert('沒有權(quán)限')
      return Promise.reject(new Error('沒有權(quán)限'))
    }
  }
  return req
})
export default request