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

 

VUE带Token访问Abp Vnext Api

上一篇:C# 数字 转换 大写汉字


下一篇:Selenium常用API