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     })