30.(前端)请求拦截器设置token

1.请求拦截器设置的原因

前端中登录过后，我们进入的页面需要从后端的接口中数据来填充给前端。由于我们后端的访问有设置装饰器，必须登录过后才可以进行访问（这也是为什么我之前测试都把装饰器注释掉的原因，不然永远登录失败）。所以，我们需要在请求后端接口时候，发送请求时，携带一个token，告诉他们我们已经登录过了。
简单来说，每次发送请求给后端，就把请求拦截下来，放个拦截器。

2.步骤

1. 设置默认传递给的地址
2. 拦截器第一步：定义函数
3. 第二步：获取token，从sessionStorage中
4. // 第三步，验证tokenStr是否为空，如果为空就直接返回，不为空就传递给请求头

3.代码展示

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
// import './assets/css/global.css'
// 引入element-ui
import './plugins/element.js'
// 引入axios：用于登录操作传递数据给后端
import axios from 'axios'
// 引入qs，把登录的参数转成字符串
import qs from 'qs'

// import VueRouter from "vue-router";

Vue.config.productionTip = false
// 给Login.vue 传递axios，使用this就可以获得到.$后是任意写
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs
// 设置默认传递给的地址
// axios.defaults.baseURL = 'http://localhost:5000'

// 设置一个请求拦截器，来设置token
axios.interceptors.request.use(
  // 拦截器第一步：定义函数
  config => {
    // 第二步：获取token，从sessionStorage中
    const tokenStr = window.sessionStorage.getItem('token')
    // 第三步，验证tokenStr是否为空，如果为空就直接返回，不为空就传递给请求头
    if (tokenStr) {
      config.headers.token = tokenStr
    }
    return config
  }
)


new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.测试结果