话不多说,直接上图分析:

 

一.导入所需的功能模块:
第一二行分别导入路由模块和vuex模块,第三四行导入的模块是一个有进度条效果的小组件,具体使用可以去搜索NProgress,

二.白名单
第六行何为白名单?就是简单理解就是跟黑名单反义词,黑名单里面的内容时不允许被打扰和访问了的,白名单就是相反可以访问和被打扰的

三.全局前置守卫
第八到三十行都是路由守卫的部分,它有三个值分别是from(从哪来),to(到哪去),next(接下来想干嘛).

注意: 
next:它是一个函数

        如果直接放行 next()

        如果跳转到其他页 next(其他页)

然后搭配下图我们就能做到登录退出的限制了

 

其中主要介绍一下不好理解的代码,

第十六行的判断条件是判断从vuex里面拿到的数据是否存在

第九行的代码是进度条的起始时间

第十四行的代码是进度条的终止时间

第十八行的代码是调用vuex的actions里面getUserInfo函数(发起ajax请求),因为ajax请求是异步任务,所以需要用async和await

 四.全局后置守卫
第三十二到三十四行就是全局后置守卫,里面的代码的具体作用就是控制进度条的消失时间了.