全局前置守卫解读

一、全局前置守卫是什么？

        全局守卫：简单说在项目中任意路由切换都会触发的钩子函数。

        全局前置守卫：是在组件初始化时候调用的，每次路由切换的时候，全局前置守卫都会调用，因此在全局守卫中，我们总是需要设置一些什么。全局前置守卫（不只是全局前置守卫）包含三个参数：to、from、next()

        第一个参数 to ：指的是跳转后的路由 --- 我要去哪儿；

        第二个参数 from ： 指的是从哪个路由开始跳转 --- 我从哪儿来；

        第三个参数 next() : 它是一个函数，表示路由可以往下进行跳转 --- 我是守门员；

二、设置全局前置守卫

1.引入路由文件

        既然是路由守卫，首先要把路由文件引入到当前文件

 2.调用全局前置守卫函数

        调用 router.beforeEach()  => {  } 函数，开始书写全局前置守卫代码；

        这里要注意参数：to、from、next

3.开始设置全局前置守卫

有token

        既然现在考虑到了路由跳转，首先应该想到用户有没有登录？通过token唯一标识，我们很容易能够知道用户登录没有。有token -- 已登录；没有token -- 未登录（跳转到登录页面让用户登录）。（小提示：这里的token和username已经调取用户信息接口保存在仓库userStore中）

路由前置守卫

        如果token存在，此时进一步判断：用户是否从登录页面登录后获取到了用户信息、获取到了用户信息中的token？如果是，好的通过！调用next() 函数路由到首页：next({ path: '/' }) 。

        如果不是，那么此时得到的token是之前登录过保存在本地存储localStorage中的，虽然有token，但是没有用户信息，调用next函数跳转后什么也没有。此时不仅仅要考虑到是否有token，还要考虑到是否有用户信息。那么我们可以通过用户信息中的username字段去判断是否已经调用用户信息接口获取到了用户信息。有用户信息，调动next()函数进行跳转；如果username不存在，说明没有用户信息，需要先调取接口获取，然后再调用next函数放行；

        需要注意的是：此时的next() 放行，括号里面应当写上需要前往的路由：next(to.path) 或者 next({ ...to })；这是因为在登录后点击刷新时，保证刷新后的路由跳转是当前点击的路由。因为存在异步路由时，获取到了用户信息但是异步路由还没有加载完毕，导致刷新后出现空白。

刷新后路由跳转了，但是异步路由还没加载完毕，所以显示空白

        另外需要注意这里catch里面的代码。try...catah...不做过多解释。发现catch里面调用了退出登录的函数。这是为什么呢？因为获取用户信息失败，需要用户退出重新登录获取用户信息，并且next函数放行的路由是通往登录界面的。

没有token

         到这里一直分析的是用户有token的情况，如果没有token呢？事情变得非常简单 --- 没有token说明用户没有登录，直接调用next到登录页面让用户登录即可。

        next({ path: '/login', query: { redirect: to.path }})      

 结尾小tips：可以通过进度条 nprogress 明晰路由跳转喔~

 nprogress.start() --- 开始；nprogress.done() --- 结束