1.请求拦截器设置的原因
前端中登录过后,我们进入的页面需要从后端的接口中数据来填充给前端。由于我们后端的访问有设置装饰器,必须登录过后才可以进行访问(这也是为什么我之前测试都把装饰器注释掉的原因,不然永远登录失败)。所以,我们需要在请求后端接口时候,发送请求时,携带一个token,告诉他们我们已经登录过了。
简单来说,每次发送请求给后端,就把请求拦截下来,放个拦截器。
2.步骤
- 设置默认传递给的地址
- 拦截器第一步:定义函数
- 第二步:获取token,从sessionStorage中
- // 第三步,验证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')