承接上文，展开如下工作内容
一、创建permission.js
脚本文件目录如下图所示
注：
NProggress为引用的进度条插件，安装：npm install --save nprogress
二、简述本次实例中的技术应用
(1). router.beforeEach(to, from, next)：
全局前置守卫
**to:**即将访问的路由
**from:**当前离开的路由
**next:**在本次实例中用到了下方三种使用方式
next():可以理解为，对即将访问对路由是否放行
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新 的导航。
next(false): 中断当前的导航
(2).router.addRoutes(parm):
路由动态匹配。parm为参数，在实际开发中，通过后台接口获取，必须是一个符合 routes 选项要求的数组；当用户登录时，根据后台返回当路由数组，通过**router.addRoutes(parm)，**给用户赋予不同当访问权限。
实际应用场景中的应用可以参考:addRoutes的使用
(3).next({ ...to ,replace: true}):
**含义:**如果参数to,不能找到对应的路由的话，就再执行一次beforeEach((to, from, next)直到其中的next({ ...to})能找到对应的路由为止。replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由
作用: 防止AddRoutes执行尚未结束，就立刻访问路由，因找不到被添加的路由，导致白屏的问题
(4).async、await、promise
**作用:**在这里你可以理解为是解决异步操作所使用，其中promise是axios的核心应用，同时也是互联网公司面试的必考问题，具体详细可访问详细描述。
(5).store.dispatch、store.getters
涉及vuex的应用，我会在下篇文章中单独讲解，在此处大致了解，是为了获取用户角色、权限的用途即可
三、构建全局前置守卫
路由守卫的官方名称是导航守卫，其中导航守卫中又有很多的分类，各有各的用处，详情可以点击链接查看官网介绍，下面我们用到的是其中的全局前置守卫。
1.代码逻辑解析：
//路由白名单设置
const whiteList = ['/login', '/Index']
router.beforeEach(async (to, from, next) => {
//加载进度条
NProgress.start()
//获取路由自定义的title作为网页title，方法的应用在上篇教程中有提及
document.title = getPageTitle(to.meta.title)
如下图所示
//获取token，方法的应用在上篇教程中有提及
const hasToken = getToken()
//token有值，表示用户已经登录
if (hasToken) {
//路由为登录页面继续访问
if (to.path === '/login') {
next({
path: '/'
})
NProgress.done() //终止进度条
} else {
//判断用户是否已通过getInfo获得其权限角色
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
//已获取用户角色,放行继续访问
next()
} else {
//未获取用户角色
try {
//获取用户角色
const {
roles
} = await store.dispatch('user/getInfo')
// 根据角色获取该角色所拥有的路由（也就是常见后台管理界面左侧的功能树）
// 也就是获取该用户所具有的权限
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
// 动态路由匹配,给该用户赋予通过后台接口获取的权限
router.addRoutes(accessRoutes)
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()
}
}
})
在逻辑上我们已经实现了：
(1).用户登录时：根据token验证访问接口，通过角色，动态获取自身可访问的路由权限
(2).未登录时：仅能访问自定义的白名单路由权限
小伙伴们是不是觉得用户登录后的权限验证已经结束，哈哈，草率了啊
最后一步，需要我们将该脚本在main.js中添加引用
如下图所示
main.js才是该项目的程序入口,忘记的朋友可以看下之前的教程(main.js介绍及配置),每个组件的访问都会加载main.js，进而被我们刚构建在permission.js中的**全局前置导航，进行守卫，实现路由权限的验证。
**
悟：
路漫漫其修远兮吾将上下而求索，
在编程中很多应用是多项知识点结合使用的，
我将尽最大的努力进行整合，将琐碎的知识分享给初学者。
注：本次实例中的vuex的应用，将在下载分享中继续为大家讲解。
**请继续阅读 vue入门之vuex五大属性及动态配置(6)
**
