zoukankan      html  css  js  c++  java
  • 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);
        });
  • 相关阅读:
    发送电子邮件
    PHP Session
    Cookie
    Python基础语法
    Python中文编码
    Python简介
    PHP文件上传
    基于1.22.1版本的k8s部署
    k8s基于NFS创建动态存储StorageClass
    关于在k8s-v1.20以上版本使用nfs作为storageclass出现selfLink was empty, can‘t make reference
  • 原文地址:https://www.cnblogs.com/liessay/p/13217877.html
Copyright © 2011-2022 走看看