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