Vue设置token拦截以及给每个api加上Authorization请求头

Posted 2021-02-18 ABKing

登录页面的代码 Login.vue

关键代码为第36行

this.$store.commit("set_token", response.data.data);

set_token是store/index.js中mutations里的函数名

 1 <template>
 2     <div>
 3         <el-form :model="user">
 4             <el-form-item label="用户名" :label-width="formLabelWidth">
 5                 <el-input v-model="user.name" autocomplete="off"/>
 6             </el-form-item>
 7             <el-form-item label="密码" :label-width="formLabelWidth">
 8                 <el-input v-model="user.password" type="password" autocomplete="off"/>
 9             </el-form-item>
10             <el-button type="primary" round @click="login">登录</el-button>
11             <el-button type="warning" round @click="reset">重置</el-button>
12         </el-form>
13     </div>
14 </template>
15 
16 <script>
17     export default {
18         name: "Login",
19         data() {
20             return {
21                 user: {
22                     name: ‘‘,
23                     password: ‘‘
24                 },
25                 formLabelWidth: ‘60px‘,
26             }
27         },
28         methods: {
29             login(){
30                 axios.post(‘http://localhost:8080/JwtTest_war_exploded/customer/login2‘, this.user)
31                 .then(response => {
32                     // console.log(response.data);
33                     if(response.data.code === 200){
34                         this.$store.commit("set_token", response.data.data);
35                         this.$router.push("/home");
36                     }else {
37                         console.log(response.data.msg);
38                     }
39                 })
40             },
41             reset(){
42                 this.user.name = ‘‘;
43                 this.user.password = ‘‘;
44             }
45         }
46     }
47 </script>
48 
49 <style scoped>
50 
51 </style>

接下来store里面的代码如下:

 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 })

router/index.js里面增加以下代码:

1 if (sessionStorage.getItem("token")){
2     store.commit("set_token", sessionStorage.getItem("token"))
3 }

最后在main.js里增加axios的请求和响应拦截器

 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 })