前言： 日常使用淘宝时，如果我没登录，是不能购买的，会提示我先登录，于是我输入账号密码，跳转到我刚才的页面。而我只要登陆了，下次使用淘宝也不需再重复输入账号密码。直到我还久没登陆了，才需要我重新登录。
应用场景举例： 1.退出软件提示我，真要退出吗？点不确定还是本页面，点确定就退到别的页面了
2.当我再页面写了一段话，点击别的页面，提示我，你还有东西没保存，要离开么？
3.当我没登陆时，给某个文章点赞关注什么的，提示我，先登录。
以上都是路由守卫在发挥作用，他就像个保安、关卡，你有就有，没有，那你进不去，除非你有我想要的东西。
明确几个点：
1.可以不用么？ ---可以
2.全局、组件级、 路由独享这么多守卫，可不可以只用那么一两个？ ---可以
3.使用方法其次，理解什么时候要用，用什么样的，看图理解。
4.使用到的技术：vuex保存数据 、axios响应拦截器、组件内取值（从vuex拿），在.js文件中拿vuex的值、组件中保存数据到vuex、编程式跳转、跳转页面传参（query中的值）、
1.是什么？
路由守卫: 是router对象一个属性，本质上是一个函数。在路由切换时，它会被调用，用它就可以用来去检查凭证（是否登录）。
- 组件内的守卫
- 全局守卫
- 路由独享的守卫
2.怎么用 ？
router.beforeEach((to, from, next) => {}) 特点：使用频率不高，但必不可少。
全局路由为例子： const router = new VueRouter({ ... }) router.beforeEach(function (to, from, next) { console.log('路由变化了', to, from, next) next() }) router.afterEach(function (to, from) { console.log('路由变化了', to, from) next() })
参数说明：
to 表示在当前路由变化时，你进入哪个路由。
from 表示在当前路由变化时，你要离开哪个路由。
next 它是一个函数，你必须要调用这个next()来结束对当前的动作的处置。你可以根据自己的业务逻辑来决定使用如下三个中的某一个：
next() // 正常放行 next(false) // 不让跳，回去原来的页面 next(路由) 进入指定路由 next({path: , name:, ....}) next('/地址')
3举个例子说明：
beforeRouteLeave (to, from, next) { if (this.msg && window.confirm('确定要跳转')) { next() } else { next(false) } },
解释： beforeRouteLeave是页面级的路由守卫。当我写了好多字后，点别的页面，这时候我的路由守卫开始执行，如果你想跳到别的页面你得：文字是空的，并且弹窗你得点确定。满足两点，🆗，你跳吧。如不满足，那就还是本页面。
4 动态路由传参
场景：我本来看一篇文章，想给作者点个关注，结果没登陆，啪，给我弄到登录页，让我先登录，🆗，我登陆了，结果一看，我去给我弄首页来了，我之前看的那篇文章呢？？？
所以动态路由传参你的作用就是，记住你没登陆前在哪里，你登陆后，我好让你去你之前的位置，而不是整到其他地方。
所以：
1.在跳到登陆页时，传入要返回的页面的地址next('/login?backto=' + to.fullPath)
2.登陆成功后，回到初始页面（你之前待的位置）
// 用户跳转 // 根据当前路由参数，决定跳到哪里去 const backto = this.$route.query.backto || '/' this.$router.push(backto)
3.
- to.path 不包含路径中查询参数（/setting）
- to.fullPath会包含路径中的查询参数(/setting?a=1)
4.encodeURIComponent: 会对URL中的&=/等特殊符号进行编码。
5.以401问题为例，说明路由守卫具体使用
5.1出现场景：
- 未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。
- 登录用户的token过期了
解决方式：通过axios响应拦截器来处理401问题。
5.2 理解token过期
你登陆成功之后，接口会返回一个token值，这个值在后续请求时带上（就像是开门钥匙）。但是，这个值一般会有有效期（具体是多长，是由后端决定），在我们的项目中，这个有效期是2小时。
5.3refresh_token的作用
当用户登陆成功之后，返回的token中有两个值，说明如下：
token:
作用：在访问一些接口时，需要传入token，就是它。
有效期：2小时（安全）。
refresh_toke
作用: 当token的有效期过了之后，可以使用它去请求一个特殊接口（这个接口也是后端指定的，明确需要传入refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的那个token。
有效期：14天。（最理想的情况下，一次登陆可以持续14天。）
5.4响应拦截器功能
axios中提供了响应拦截器功能：所有从后端回来的响应都会集中进入响应拦截器中。所以，我们可以在响应拦截器中去写代码来统一解决。
// 添加响应拦截器 instance1.interceptors.response.use(function (response) { return response }, async function (error) { // 如果发生了错误，判断是否是401 console.dir(error) // 开始处理 return Promise.reject(error) })
总结：401问题的目的是让用户无感。用户点击登录发起请求，后台返回401错误。这个时候响应拦截器先判断，有没有token？没有的话有没有refresh_token 都没有的话老实点去登陆。如果有 refresh_token ，用它请求新的token，后段服务器返回新的token，这个时候我们使用vuex保存，替换之前vuex保存token的变量的值，然后重新发送请求，带上新的token，然后后台应该正常响应。当然也有可能更新token失败，那么就去登录。一切都是背后操作，用户是感知不到的，当然如果用户打开f12，打开Network应该是可以看到有一条红色请求，里面写着401.
