前端权限-路由权限控制

方案1
初始化得时候就加载全部得路由，在路由上标记全部是我权限信息，在每次跳转之前对路由进行检查

```bash
const routerMap = [
 {
 path: '/permission',
 component: Layout,
 redirect: '/permission/index',
 alwaysShow: true, 
 meta: {
 title: 'permission',
 icon: 'lock',
 roles: ['admin', 'editor'] 
 },
 children: [{
 path: 'page',
 component: () => import('@/views/permission/page'),
 name: 'pagePermission',
 meta: {
 title: 'pagePermission',
 roles: ['admin'] 
 }
 }, {
 path: 'directive',
 component: () => import('@/views/permission/directive'),
 name: 'directivePermission',
 meta: {
 title: 'directivePermission'
 // if do not set roles, means: this page does not require permissi
on
 }
 }]

方案2
初始化得时候首先把不需要权限控制得先加载，比如404页面与登录页面得路由，如果用户通过url进行强制页面访问，直接条状404页面从源头切断，登录后，获取用户得登录信息，然后在全局导航首卫理利用addRoutes添加路由

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' // getToken from cookie
NProgress.configure({ showSpinner: false })// NProgress Configuration
// permission judge function
function hasPermission(roles, permissionRoles) {
 if (roles.indexOf('admin') >= 0) return true // admin permission passed
directly
 if (!permissionRoles) return true
 return roles.some(role => permissionRoles.indexOf(role) >= 0)
}
const whiteList = ['/login', '/authredirect']// no redirect whitelist
router.beforeEach((to, from, next) => {
 NProgress.start() // start progress bar
 if (getToken()) { // determine if there has token
 /* has token*/
 if (to.path === '/login') {
 next({ path: '/' })
 NProgress.done() // if current page is dashboard will not trigger af
terEach hook, so manually handle it
 } else {
 if (store.getters.roles.length === 0) { // user_
info
 store.dispatch('GetUserInfo').then(res => { // user_info
 const roles = res.data.roles // note: roles must be a array! suc
h as: ['editor','develop']
 store.dispatch('GenerateRoutes', { roles }).then(() => { // 
roles
 router.addRoutes(store.getters.addRouters) // 
 next({ ...to, replace: true }) // hack addRoutes ,
set the replace: true so the navigation will not leave a history record
 })
 }).catch((err) => {
 store.dispatch('FedLogOut').then(() => {
 Message.error(err || 'Verification failed, please login again'
)
 next({ path: '/' })
 })
 })
 } else {
 // next() ↓
 if (hasPermission(store.getters.roles, to.meta.roles)) {
 next()//
 } else {
 next({ path: '/401', replace: true, query: { noGoBack: true }})
 }
 // ↑
 }
 }
 } else {
 /* has no token*/
 if (whiteList.indexOf(to.path) !== -1) { // 
 next()
 } else {
 next('/login') // 
 NProgress.done() // if current page is login will not trigger afterE
ach hook, so manually handle it
 }
 }
})
router.afterEach(() => {
 NProgress.done() // finish progress bar
})