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