前言： 日常使用淘宝时，如果我没登录，是不能购买的，会提示我先登录，于是我输入账号密码，跳转到我刚才的页面。而我只要登陆了，下次使用淘宝也不需再重复输入账号密码。直到我还久没登陆了，才需要我重新登录。

应用场景举例： 1.退出软件提示我，真要退出吗？点不确定还是本页面，点确定就退到别的页面了

2.当我再页面写了一段话，点击别的页面，提示我，你还有东西没保存，要离开么？

3.当我没登陆时，给某个文章点赞关注什么的，提示我，先登录。

以上都是路由守卫在发挥作用，他就像个保安、关卡，你有就有，没有，那你进不去，除非你有我想要的东西。

明确几个点：

1.可以不用么？ ---可以

2.全局、组件级、 路由独享这么多守卫，可不可以只用那么一两个？ ---可以

3.使用方法其次，理解什么时候要用，用什么样的，看图理解。 

4.使用到的技术：vuex保存数据 、axios响应拦截器、组件内取值（从vuex拿），在.js文件中拿vuex的值、组件中保存数据到vuex、编程式跳转、跳转页面传参（query中的值）、

1.是什么？

路由守卫: 是router对象一个属性，本质上是一个函数。在路由切换时，它会被调用，用它就可以用来去检查凭证（是否登录）。

 按执行的时机，定义的位置：

1. 组件内的守卫

2. 全局守卫

3. 路由独享的守卫

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出现场景：

1. 未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。

2. 登录用户的token过期了

解决方式：通过axios响应拦截器来处理401问题。  

5.2 理解token过期

你登陆成功之后，接口会返回一个token值，这个值在后续请求时带上（就像是开门钥匙）。但是，这个值一般会有有效期（具体是多长，是由后端决定），在我们的项目中，这个有效期是2小时。

5.3refresh_token的作用

当用户登陆成功之后，返回的token中有两个值，说明如下：

• token:

  • 作用：在访问一些接口时，需要传入token，就是它。

  • 有效期：2小时（安全）。

• refresh_token

  • 作用: 当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.