路由守卫的格式

to:要去哪个页面

form：从哪个页面过来

next：是一个函数

router.beforeEach( (to,from,next)=>{

console.log( to,from )

next( ) / next( flase ) // 放行或禁止放行

) }

注：路由守卫中一定要记得执行 next

通常需要满足的条件：

①登录用户不能再次回到 login

②没有登陆就不能访问除了login之外的其它页

路由前置守卫流程图

流程代码

有token

分析：有token时就不能再跳到登录页面

如果to.path==='login' 就跳到主页页面 next( '/' )，如果要跳转的页面不是登录页面，就放行 next( )

没有token

分析：没有token时，用户切换页面就要强制跳转到登录页面，让用户重新登陆获取新的token

如果用户要去的地址刚好是登录页面（还有其它的不需要token也可以访问的页面），那么就放行，如果是其他页面就退出到登录页面

这里为了防止不需要用户携带token就可以访问的页面太多，不方便书写使用，将所有页面地址封装到了一个白名单空数组中，使用时，直接使用数组的 includes 方法，whiteList.inclueds( to.path ),如果为true，说明数组中包含不携带token 就可以访问的某一个页面，那么就放行 next( ),如果是false,那么就返回登录页面

（代码中的异步请求表示，需要在有token的前提下，也就是成功跳转到主页面之前，先将用户信息保存到vuex中，这里在actions中写了两次异步请求，并且将两次结果通过展开运算符合并到一个对象中）