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

Posted 2023-02-22

【中文标题】Vuex 操作未将本地存储令牌添加到 Axios 调用后

【英文标题】：Vuex action is not adding localstorage token to Axios post call

【发布时间】：2021-07-02 14:20:58

【问题描述】：

我使用烧瓶作为我的后端服务器。 vuex 操作未将令牌从本地存储状态设置为 Axios API 调用。请帮我解决我所缺少的。目前我被困在这里，这与我的previous question 有关，我无法得到答案，所以再次发布.. 下面是我的 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);
          );
      );
    ,

【问题讨论】：

我不是 Vuex 专家，但我用过几次。尝试将您的状态值初始化为常量作为占位符，并创建突变（如果同步）或操作（如果异步）以调用 localStorage.getItem()。

@Tim 你能举个例子吗？

刚刚看到您对 11 小时前的示例的请求（这里是早上）。如果您在接下来的 8 小时内解决了问题，请通过评论告诉我。如果没有，我今晚会尝试看看。

您好，尚未解决。 js不太好。以期待为例。完整的代码可以在我之前的帖子中找到，我在我的问题中添加了它。

【参考方案1】：

这是我使用简化的 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>