Token无感刷新

token是有时效时间的，存在一种情况：表单提交，不知道用户要提交多久时间，可能会有填了一个小时刚写完结果点击提交回到登录页面了。

为提升用户体验——token无感刷新

登录的时候返回短token（失效时间短）

401代表短token失效

请求拦截器：

service.interceptors.request.use(
  function (config) {
    // 对非登录和刷新Token的请求，添加Authorization头
    if (config.url !== "/login") {
      config.headers["Authorization"] = `Bearer ${localStorage.getItem("token")}`;
    }
    // 对刷新Token的请求，使用refresh_token
    if (config.url === "/refresh_token") {
      config.headers["Authorization"] = `Bearer ${localStorage.getItem("refresh_token")}`;
    }
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

config.headers["Authorization"]意思是添加到请求头的Authorization字段中，格式为Bearer <token>

响应拦截器：

service.interceptors.response.use(
  async function (response) {
    // 成功响应：保存新的 Token 和 Refresh Token
    if (response.data.code === 0) {
      response.data.data.token && 
        localStorage.setItem("token", response.data.data.token);
      response.data.data.refresh_token && 
        localStorage.setItem("refresh_token", response.data.data.refresh_token);
      return response.data.data;
    } 
    // Token 过期（401 状态码）
    else if (response.data.code === 401) {
      // 尝试刷新 Token
      const res = await getRefresh();
      if (res) {
        // 用新 Token 重发原请求
        response.config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
        const result = await service.request(response.config);
        return result;
      }
    }
  },
  function (error) {
    return Promise.reject(error);
  }
);

这个写法的意思是如果前面为true，就走后面的逻辑；如果前面为false，后面就不走了

类似于：

这是在请求刷新token的时候携带长接口，然后就能拿到最新的短token

然后表单再提交的时候就携带这个短token就行

在调用getRefresh也是接口请求，也会走上面这段，还会把最新的短token放到localStorage里

为什么不直接设置一个长token？还要设置一个短token？

token一直不变会有安全性问题

总结：

1.获取后端数据的时候，安全性是怎么保证的？

token认证

2.token认证的过程？描述一下

短token失效，就携带长token去请求新的短token，然后再提交表单的时候携带短token去请求

3.token认证的token是怎么携带的？

通过header携带

4.header携带的好处？是不是一定要放在header携带？

符合http标准、不放在url更安全

也可以放在cookie里，但是存在跨域问题

5.token无感刷新有听过吗？应用场景？简单说一说过程？

如上