时间戳

首页 > 解决方案 > Vuex 操作未将本地存储令牌添加到 Axios 调用后

vue.js - Vuex 操作未将本地存储令牌添加到 Axios 调用后

问题描述

我使用烧瓶作为我的后端服务器。vuex 操作未将令牌从本地存储状态设置为 Axios API 调用。请帮我解决我所缺少的。目前我被困在这里，这与我之前的问题有关，我想得到答案所以再次发布.. 下面是我的 vuex 商店代码：

Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    // accessToken: JSON.parse(localStorage.getItem('access_token')) || null,
    // refreshToken: JSON.parse(localStorage.getItem('refresh_token')) || null,
    accessToken: localStorage.getItem('access_token') || null,
    refreshToken: localStorage.getItem('refresh_token') || null,
    APIData: '',
  },
actions: {
refreshToken(context) {
      return new Promise((resolve, reject) => {
        console.log(context.state.refreshToken);
        getAPI.post('/refresh', {
          // refresh_token: context.state.refreshToken,
          headers: { Authorization: `Bearer ${context.state.refreshToken}` },
        })
          .then((response) => {
            console.log('New access token granted');
            context.commit('updateAccessToken', response.data.access_token);
            console.log(context.state.accessToken);
            resolve(response.data.access_token);
          })
          .catch((error) => {
            console.log('\'error in refresh:\'', error);
            reject(error);
          });
      });
    },
}

标签： vue.jsvuejs2axiosvuexvuex-modules

解决方案

这是我使用简化的 Vuex 存储和 Vue 组件构建的示例，用于演示功能。

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    accessToken: '',
    localStorage: window.localStorage
  },
  getters: {
    getTokenFromLocalStorage: state => {
      return state.localStorage.getItem('accessToken');
    }
  },
  mutations: {
    storeTokenInLocalStorage(state, newToken) {
      state.accessToken = newToken;
      state.localStorage.setItem('accessToken', newToken);
    }
  }
})

VuexLocalStorage.vue

<template>
  <div class="vuex-local-storage">
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-secondary" @click="getAccessToken">Get Access Token</button>
        <h5>{{ accessToken }}</h5>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        accessToken: ''
      }
    },
    methods: {
      getAccessToken() {
        this.accessToken = this.$store.getters.getTokenFromLocalStorage;
      }
    },
    created() {
      // Store initial access token
      this.$store.commit('storeTokenInLocalStorage', 'access-token');
    }
  }
</script>

推荐阅读