import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // 白名單配置

router.beforeEach(async(to, from, next) => {
 // start progress bar
 NProgress.start()
 // 有token
 if (hasToken) {
 if (to.path === '/login') 
  // 如果當前路徑為/login，重定向到首頁
  next({ path: '/' })
  NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
 } else {
  // determine whether the user has obtained his permission roles through getInfo
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
   next()
  } else {
  try {
   // 獲取用戶信息
   const { roles } = await store.dispatch('user/getInfo')
   // 根據(jù)用戶的角色，動態(tài)生成路由
   const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
   // 動態(tài)添加路由 (將基本的路由信息跟動態(tài)路由進行合并)
   router.addRoutes(accessRoutes)
   // 繼續(xù)訪問
   next({ ...to, replace: true })
  } catch (error) {
   // 刪除token
   await store.dispatch('user/resetToken')
   Message.error(error || 'Has Error')
   // 重定向到登錄頁面
   next(`/login?redirect=${to.path}`)
   NProgress.done()
  }
  }
 }
 } else {
 // 沒有token
 if (whiteList.indexOf(to.path) !== -1) {
  // 如果在白名單中，則不需要進行任何校驗，直接放行
  next()
 } else {
  // 如果不存在于白名單中，則重定向到登錄頁面.
  next(`/login?redirect=${to.path}`)
  NProgress.done()
 }
 }
})

router.afterEach(() => {
 // finish progress bar
 NProgress.done()
})

watch: {
 $route: {
 handler: function(route) {
  const query = route.query
  if (query) { //路由查詢參數(shù)
  this.redirect = query.redirect
  this.otherQuery = this.getOtherQuery(query)
  }
 },
 immediate: true
 }
},
// methods下的：
handleLogin() { // 登錄函數(shù)
 this.$refs.loginForm.validate(valid => {
 if (valid) { // 賬號密碼校驗成功后
  this.$store.dispatch('user/login', this.loginForm)
  .then(() => {
   // 直接跳轉到this.redirect 路徑的頁面
   this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
   this.loading = false
  })
 } else {
  // ..
 }
 })
},

export const constantRoutes = [ // 用來定義普通的路由配置，不需要訪問權限的
 // 路由配置對象
]
export const asyncRoutes = [ // 通過路由元信息meta.roles來設置訪問權限，一般來說是個數(shù)組
 {
 path: '/permission',
 component: Layout,
 redirect: '/permission/page',
 alwaysShow: true, // will always show the root menu
 name: 'Permission',
 meta: {
  title: 'Permission',
  icon: 'lock',
  roles: ['admin', 'editor'] // 通過roles設置路由的權限
 },
 // ...
 }
]

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

import { asyncRoutes, constantRoutes } from '@/router'
const state = {
 routes: [],
 addRoutes: []
}

const mutations = {
 SET_ROUTES: (state, routes) => {
 state.addRoutes = routes
 state.routes = constantRoutes.concat(routes)
 }
}

const actions = {
 generateRoutes({ commit }, roles) {
 return new Promise(resolve => {
  let accessedRoutes
  if (roles.includes('admin')) {
  // 如果包含了admin，則說明是admin，具有所有模塊的訪問權限
  accessedRoutes = asyncRoutes || [] 
  } else {
  // 如果不是管理員，則需要根據(jù)用戶角色roles和異步路由進行篩選
  accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
  }
  // 將最終的結果存放到vuex中
  commit('SET_ROUTES', accessedRoutes)
  // resolve出去
  resolve(accessedRoutes)
 })
 }
}

export function hasPermission(roles, route) {
 if (route.meta && route.meta.roles) { // 如果存在meta.roles
 // 只要meta.roles中存在與用戶角色列表中相同的值，則說明具有訪問權限
 return roles.some(role => route.meta.roles.includes(role))
 } else {
 // 不存在meta或者是不存在meta.roles，則說明是通用模塊，直接放行
 return true
 }
}

export function filterAsyncRoutes(routes, roles) {
 const res = []

 routes.forEach(route => {
 const tmp = { ...route }
 if (hasPermission(roles, tmp)) { // 相對路由數(shù)組的每一項進行訪問權限的判斷
  if (tmp.children) {
  // 如果存在children，則遞歸調用篩選函數(shù)
  tmp.children = filterAsyncRoutes(tmp.children, roles)
  }
  // 將處理好的路由配置放入到res中
  res.push(tmp)
 }
 })
 return res
}

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 這里的accessRoutes就是篩選之后的路由，
// 最后通過route.addRoutes將constRoutes和accessRoutes進行合并，生成最終的訪問路由
router.addRoutes(accessRoutes)

基本用法
<div v-permission="['admin','editor']"></div>
import store from '@/store'

function checkPermission(el, binding) {
 const { value } = binding
 // 從store中拿到我們訪問接口后，取到用戶角色信息
 const roles = store.getters && store.getters.roles

 if (value && value instanceof Array) { // 判斷傳入的值是不是數(shù)組，規(guī)范化傳值
 if (value.length > 0) {
  const permissionRoles = value
  // 只要傳入的permissionRoles中，包含了roles其中的一個值即可，則代表有權限
  const hasPermission = roles.some(role => {
  return permissionRoles.includes(role)
  })
  // 沒有權限則進行刪除，不展示。
  // v-permission具體實現(xiàn)可以根據(jù)業(yè)務場景進行修改
  if (!hasPermission) {
  el.parentNode && el.parentNode.removeChild(el)
  }
 }
 } else {
 throw new Error(`need roles! Like v-permission="['admin','editor']"`)
 }
}

export default {
 inserted(el, binding) {
 checkPermission(el, binding)
 },
 update(el, binding) {
 checkPermission(el, binding)
 }
}