VUE帶Token訪問Abp Vnext Api

上篇登錄保存token用了3種方式，都可以在header帶上Token訪問，本次使用第四種保存方式Vuex中保存狀態

stroe中配置好需要保存的字段及方法

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        accessToken: ''
    },
    mutations: {
        setToken(state, token) { state.accessToken = token }
    },
    actions: {},
    modules: {},
    getters: {}
})

登錄方法中增加保存到Vuex狀態管理

this.$store.commit('setToken',response.data.access_token)

axios header帶上Token訪問方法

this.$axios.get('/api/identity/users', {
  headers: {
    Authorization: "Bearer " + this.$store.state.accessToken
  }
})
.then(res = >{
  console.log(res.data.items)
})
.catch(res = >{
  if (res.response.status == 401) {
    this.$message.error({
      message: '權限不足或未登錄'
    })
  }
  console.log(res)
})

 如果每次訪問都加上header有點麻煩可配置axios攔截器，以后每次都默認帶上

需要在登錄時將Token保存一下

localStorage.setItem('access_token', response.data.access_token)

Axios.interceptors.request.use(
    config => {
        config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('access_token')
        return config;
    },
    error => {
        return Promise.reject(error.response);
    });