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

    });

巴特西

VUE带Token访问Abp Vnext Api

最新文章

热门文章