vue+axios+koa 前端后端实现登录拦截--http拦截

一、前言

要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。

 

二、具体实现

当前端使用localStorage存储登陆信息，但是这个时候，后端一般在登陆的成功的时候，使用JWT（json web token）会生成token，这个token包含了失效时间和秘钥，以及用户的信息。比如：

1、登陆时候后端生成失效时间的JWT

const jwt = require("jsonwebtoken");

const token = jwt.sign(userToken, secret, {expiresIn: '7d'});

这个userToken可以是，比如是登陆进来的user的id和name。

const userToken = {
     name: name,
     id: res[0]["id"]
};

secret是自己定义的salt，确保这个jwt生成的字符串的随机性和不易破解性。比如项目英文名称

const secret =