axios 拦截器（interceptors）和 登录状态的保存 cookie session token 三者的区别 和 路由导航卫士

http 的请求是无状态的

cookie

1. 数据保存在客户端。

2. 数据量小，很多小的站点对cookie的大小和数量都济宁了限制。

3. 不安全，别人可以分析存放到本地的cookie并且进行cookie诈骗，也可能被拦截。

session

1. 数据存放在服务器端。

2. 安全性叫高。（但是服务器出现故障也会造成数据丢失）

3. session 可以依赖 cookie， 也可以不依赖使用 URL。

4. 访问量增多，占用服务器资源，如果服务器故障，所有保存的信息也会丢失。

token

1. 在服务器中不存在用户状态，他是定义通用的算法。

2. 客户端第一次登录时候，服务器会生成一个 token ，返回 给客户端。

3.  后续的所有请求都会带着 token。

4. 服务器会根据算法啦效验 token 的合法性。

5. 怎么把token携带的数据给服务器

  5.1 我们先使用 localStorage.setItem('数据名'，数据位置)，例如 localStorage.Item('mytoken', res.data.token),将token 保存到localStorge 中，在客户端将要带着 token 信息发送请求时，会被一个叫做 axios 的拦截器（interceptors）拦截，将数据处理之后再将请求发送给服务器。处理过程就是： 拦截器将 token 拿出来，放到一个 key 中，这个key 是前后台约定好的一个 key， 然后这个key 会作为一个请求头放到即将发送给服务器的请求中，此时请求头的值就是 token。以后的每一次请求，拦截器都会把token 拦截，作为请求头发送过去。服务器拿到token 后就会进行效验，效验通过后就会返回数据。

6. axios 拦截器 的使用

详见github 上的使用方法  https://github.com/axios/axios  拦截器一种可以拦截请求 一种可以拦截响应,这里举例拦截请求，github上的例子

1 axios.interceptors.request.use(function (config) {
2     // Do something before request is sent
3     return config;
4   }, function (error) {
5     // Do something with request error
6     return Promise.reject(error);
7   });

我自己的示例代码：

 1 axios.interceptors.request.use(function(config) {
 2     // 请求成功后返回的内容
 3     let token = localStorage.getItem('mytoken') //拦截器获取到token 存储到变量token中
 4     if (token) {
 5         //config是一个请求参数,他是一个对象,Authorization 是前后台约定好的那key,把获取到的token赋值给他
 6         config.headers['Authorization'] = token
 7     }
 8     return config;
 9 }, function(error) { //请求失败后返回的内容
10     return Promise.reject(error);
11 });

    携带

携带的token 可以在 network 中查看。

7. 路由 全局守卫

在 vue 的 router 中叫做导航守卫，注册一个全局守卫，他的作用就是在路由跳转之前，对路由进行判断，防止未登录用户跳转到需要登录的页面上去

具体使用方法 可以参考文档      https://www.merriam-webster.com/dictionary/touter

示例代码演示：

 1 // 注册一个全局守卫（导航卫士）,其作用就是在路由跳转之前，对路由进行判断，防止未登录的用户跳转到需要登录的页面
 2 router.beforeEach((to, from, next) => {
 3         let token = localStorage.getItem('mytoken') //获取用户登录时生成的token
 4         if (token) {
 5             next(); //如果token存在，说明用户已经登录，调用next方法，不妨碍用户继续浏览
 6         } else {
 7             if (to.path !== '/login') { //如果用户没有登录浏览别的页面，则强制跳转到登录页面
 8                 next({ path: '/login' })
 9             } else { //如果用户浏览的就是登录页面，则调用next方法 ，不去干涉，
10                 next()
11             }
12         }
13     })