token和axios拦截器

胡_同学
722 阅读3分钟

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

Snipaste_2022-11-20_20-30-30.png

Snipaste_2022-11-20_20-31-00.png

具体图片

03-token工作流程.png

axios拦截器使用

1.1-拦截器工作流程

05-axios拦截器工作流程.png

  • 把官网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

06-使用axios拦截器处理token与401.png

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

avatar
文章
阅读
粉丝