Vue设置token拦截以及给每个api加上Authorization请求头
2021-03-04 15:28
标签：用户名 log imp ssi response input modules 设置 template 登录页面的代码 Login.vue 关键代码为第36行 this.$store.commit("set_token", response.data.data); set_token是store/index.js中mutations里的函数名 接下来store里面的代码如下: router/index.js里面增加以下代码: 最后在main.js里增加axios的请求和响应拦截器 Vue设置token拦截以及给每个api加上Authorization请求头 标签：用户名 log imp ssi response input modules 设置 template 原文地址：https://www.cnblogs.com/ABKing/p/12923029.html 1 2
1 import Vue from ‘vue‘
2 import Vuex from ‘vuex‘
3
4 Vue.use(Vuex)
5
6 export default new Vuex.Store({
7 state: {
8 token: ‘‘
9 },
10 mutations: {
11 set_token(state, token){
12 state.token = token;
13 sessionStorage.token = token
14 }
15
16 },
17 actions: {
18 },
19 modules: {
20 }
21 })
1 if (sessionStorage.getItem("token")){
2 store.commit("set_token", sessionStorage.getItem("token"))
3 }
1 // 添加请求拦截器
2 axios.interceptors.request.use(function (config) {
3 // 在发送请求之前做些什么
4 // 判断是否存在token,如果存在将每个页面header添加token
5 if (store.state.token) {
6 config.headers.common[‘Authorization‘] = "Bearer " + store.state.token
7 }
8 return config
9 }, function (error) {
10 router.push(‘/login‘)
11 return Promise.reject(error)
12 })
13 // 添加响应拦截器
14 axios.interceptors.response.use(function (response) {
15 // 对响应数据做点什么
16 return response
17 }, function (error) {
18 // 对响应错误做点什么
19 if (error.response) {
20 switch (error.response.status) {
21 case 401:
22 store.commit(‘del_token‘)
23 router.push(‘/login‘)
24 }
25 }
26 return Promise.reject(error)
27 })
文章标题：Vue设置token拦截以及给每个api加上Authorization请求头
文章链接：http://soscw.com/index.php/essay/60053.html