token与axios拦截器

Token实现JWT身份认证
1.1-Token介绍
1.为什么要有token?

默认情况下，HTTP是一个无状态协议，也就是说任何浏览器都可以访问服务器，但是服务器并不能知道浏览器到底是属于哪个用户的。

2.token是什么 ： 身份令牌

token是一串经过加密之后的字符串，相当于是用户一种身份认证令牌。类似于古代的腰牌,现代的工牌。 见到这个牌子，服务器才知道你是自己人，才会把数据响应给你。

jwt全称JSON WEB Token：它是一个后端加密并转换生成的一个字符串, 里面存储着本次登录的用户相关信息 (需要登录, 输入正确的账号和密码 换取)
3.token应用场景

免登录功能 ： 用户在输入账号、密码登录之后，只需要将服务器返回的token存入到本地。之后用户进入网站只需要取出token发给服务器。 服务器就知道你是哪一个用户了，从而避免每一次进入网站都需要用户重新登录一次。
权限控制：有的网页需要做一个权限控制，你只有登录了才可以访问。没有登录就会自动跳转到登录页。这个时候只需要判断用户的token是否有效即可。例如订单列表页，如果用户token有效，说明用户已经登录了就可以成功跳转。如果用户token无效，说明用户没有登录，就跳转到登录页让用户先登录。
1.2-Token工作流程
1.token工作流程介绍

token工作流程分为三个步骤

第一步： 用户发送登录请求

第二步：服务器响应token,客户端将token存储在本地

第三步： 登录之后的所有请求，用户都需要在请求头中发送token

 

具体图片

 

axios拦截器使用

1.1-拦截器工作流程

• axios拦截器官网：http://www.axios-js.com/zh-cn/docs/#拦截器

 

拦截器作用: 主要在axios请求和响应之前拦截请求
拦截器有两种,请求拦截一般会统一在请求头中添加token,响应拦截一般会处理异常错误信息,以及401跳转登录页

把官网axios拦截器代码放入 ./libs/request.js文件中

由于每一个html文件都导入了这个js, 所以我们的拦截器可以对任何页面都生效
 

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
​
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

1.2-请求拦截器

请求拦截器应用场景：可以给所有的axios请求设置请求头

（1）不使用拦截器： 我们需要手动给页面每一个axios都设置请求头

（2）使用拦截器： 只需要在拦截器中给axios设置请求头即可（因为所有的axios请求都会先进入请求拦截器）

 

axios.interceptors.request.use(
    // config：请求报文信息
    function (config) {
        // 在发送请求之前做些什么
        // 如果有token,就在请求头中添加token
        if (localStorage.getItem('token')) {
            config.headers.Authorization = localStorage.getItem('token')
        }
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)

1.3-响应拦截器

响应拦截器应用：

（1）拦截401，如果遇到401错误就可以直接跳转登录页

（2）对请求错误统一处理：弹出提示框

 

axios.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        return response
    },
    function (error) {
        // 对响应错误做点什么
        // 如果是401错误，说明token没有 或 过期，就跳转登录页
        if( error.response.status === 401 ){
            alert('请先登录')
            location.href = './login.html'
        }else{//其他的错误，就弹出提示框
            Toast.fail(error.response.data.message)
        }
        return Promise.reject(error)
    }
)

1.4 使用axios拦截器处理token与401

 页面发送请求会经过请求拦截器拦截并处理判断有没有token,如果有的话就在请求头添加token 反之会发送请求到服务器, 服务器会经过响应拦截到达响应拦截器会进行处理,错误提示判断是不是401,如果是会跳转到登录页,反之则会响应请求,并页面接受响应结果