VUE带Token访问Abp Vnext Api

时间：2020-07-01 10:46:24 收藏：0 阅读：204

上篇登录保存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)
})

原文：https://www.cnblogs.com/liessay/p/13217877.html