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

登录页面的代码 Login.vue

关键代码为第34行

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

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

<template>
    <div>
        <el-form :model="user">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="user.name" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="user.password" type="password" autocomplete="off"/>
            </el-form-item>
            <el-button type="primary" round @click="login">登录</el-button>
            <el-button type="warning" round @click="reset">重置</el-button>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                user: {
                    name: '',
                    password: ''
                },
                formLabelWidth: '60px',
            }
        },
        methods: {
            login(){
                axios.post('http://localhost:8080/JwtTest_war_exploded/customer/login2', this.user)
                .then(response => {
                    // console.log(response.data);
                    if(response.data.code === 200){
                        this.$store.commit("set_token", response.data.data);
                        this.$router.push("/home");
                    }else {
                        console.log(response.data.msg);
                    }
                })
            },
            reset(){
                this.user.name = '';
                this.user.password = '';
            }
        }
    }
</script>

<style scoped>

</style>

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

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: ''
  },
  mutations: {
    set_token(state, token){
      state.token = token;
      sessionStorage.token = token
    }

  },
  actions: {
  },
  modules: {
  }
})

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

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

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

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  if (store.state.token) {
    config.headers.common['Authorization'] = "Bearer " + store.state.token
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})