:::info axios是一个用来处理异步请求的第三方库。可以在浏览器和Node环境中运行。
特点：

  • 可以对每一个网络请求进行拦截，可以拦截请求和响应。
  • 支持promise的API。
  • 支持在node环境中使用。
  • 可以中断、取消请求。
  • 可以转换请求数据和响应数据。 :::

1、axios的简单配置以及二次封装

  1. // axios的基本配置及使用
  2. 1、请求配置选项
  3. 2、响应结构信息
  4. 3、全局默认配置
  6. axios.defaults.baseURL = "http://api.clould.com";
  7. axios.defaults.headers.common["Authorization"] = AUYH_TOKEN;
  8. axios.default.headers.post["Content-Type"] = "application/x-www-form-urlencoded"
  10. 4、自定义实例默认配置
  11. const instance = axios.create.create({
  12.     baseURL: "http://www.api.com/example.com"
  13. });
  15. 优先是请求的config参数配置
  16. 其次是实例的default默认配置
  17. 最后是创建实例时的配置
  19. axios中有拦截器，分为请求拦截器和响应拦截器。
  20. // config.js
  21. const devBaseURL = "https://httpbin.org";
  22. const proBaseURL = "https://production.org"；
  23. export const baseURL = process.env.NODE_ENV === "development" ? devBaseURL : proBaseURL;
  25. // request.js文件
  26. import { baseURL } from "./config.js";
  27. // 创建axios的实例
  28. const instance = axios.create({
  29.     timeout: 6000, // 网络请求的超时时间
  30.   baseURL: baseURL
  31. })
  33. // 请求拦截：
  34. axios.interceptors.request.use(config => {
  35.     1 发送网络请求时，在页面中条件一个loading的组件作为动画。
  36.   2 某些网络请求必须要求用户登录，可以在请求中判断是否携带了token。
  37.   3 对某些请求参数进行序列化。
  38.   return config;
  39. }, err => {
  40.     return err;
  41. })
  43. // 响应的拦截
  44. axios.interceptors.response.use(response => {
  45.     return response.data;
  46. }, err => {
  47.     // 如果存在错误，并且可以对错误的类型进行简单的判断
  48.   if (err && err.response) {
  49.       switch(err.response.status) {
  50.       case 400:
  51.         err.message = "请求错误";
  52.         break;
  53.       case 401:
  54.         err.message = "未授权访问";
  55.         break;
  56.     }
  57.   }
  58.   return error;
  59. })

2、前端token的验证思路

:::info 前后端完全分离的情况下，token的验证思路和步骤:

  1. 第一次登录，前端调用后端的登录接口，发送用户名和密码。
  2. 后端接收到用户发来的用户名和密码，验证成功 就给前端返回一个token。
  3. 前端拿到token，将数据存储到localStroage和vuex中，并且跳转路由页面。将数据保存到localStorage中，是为了防止在页面刷新的时候数据丢失，做本地存储。
  4. 前端每次跳转路由，就判断localStroage是否有token，没有的话，就跳转到登录界面，携带的有token值 就跳转到对应的界面。
  5. 每次调用后端接口都要在请求头中携带token。
  6. 后端判断请求头中有无token，有token就拿到token，并验证token是否过期。验证成功就返回相应的数据 验证失败(如token过期)就返回401，请求头中没有token也返回401。
  7. 如果前端拿到状态码为401，就清除token信息并跳转到登录界面。

备注：
上述需要搭配路由、以及状态管理进行使用。 :::