设置Authorization请求头(进行token验证)

1.拿到token存store中

登录Login.vue

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

2.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: {
  }
})

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

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

4.最后在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)
})