axios请求拦截器与携带token

项目需求：需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌

​​​​​​​

1.引入axios

import axios from 'axios'

2.为axios设置请求根路径

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'

3.将token令牌保存到浏览器的sessionStorage中

示例： 

 // 1.将登录成功之后的token，保存到客户端的sessionStorage中
        //      1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
        //      1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中
        // localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
        // sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
        window.sessionStorage.setItem('token', res.data.token)
        //将res.data.token赋值给sessionStorage中的token
        // 2.通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')

4. 设置axios请求拦截器

目的是让每次发起ajax异步请求之前对axios进行一次预处理，将token令牌赋予axios

// axios请求拦截器 => interceptors 在页面发送请求前进行一次预处理
axios.interceptors.request.use(config => {
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在发起axios请求前自动进行预处理，追加一个token，以便于访问需要权限的页面
  // 为请求头对象(headers)中添加token验证的自定义字段(Authorization)
  // 作用是为了让需要验证才能使用的API能够使用(请求头中携带了token值则可通过验证)
  // 在最后必须return config
  return config
})