Question

我在 SuccessOAuth.vue 组件中成功登录 OAuth 后获得 OAuth 令牌。我得到的令牌详细信息如下：

           checkforTokens(){
             const queryString = this.$route.query;
             console.log(queryString);
             const token = this.$route.query.accessToken
             console.log(token);
             const secret = this.$route.query.tokenSecret
             console.log(secret);
             this.tokens.token = token;
             this.tokens.secret = secret;
          }
       },
       beforeMount() {
           this.checkforTokens();
       }

现在我想在另一个组件 apiCalls.vue 中使用此令牌，在那里我使用此令牌详细信息来调用 API 方法。

<script>
...
 methods:{

      getProductDetails() {
      console.log("==========================================");
      console.log(".. Get Product details....");
      axios
        .get("/auth/getShpDetails", {
          params: {
            token: this.tokens.token
          }
        })
        .then(response => {
          const productInfo = response.data;
          console.log("Product info :" + productInfo);
        });
    },

}
</script>

如何将令牌详细信息从 SuccessOAuth 组件传递到 apiCalls。我尝试使用 props 方法，但无法获取脚本标记的令牌值，不确定用于传递的其他方法，即使用 $emit 和使用 vuex。请提出解决问题的最佳方法和正确的解决方案。

Answer 1

一种方法可能是 vuex

在根目录中，store 创建一个 token 字段并创建一个 getter，您可以从任何 vue 组件和任何生命周期钩子上调用它..

第二种方法可以是将令牌设置为 localStorage 并在任何需要的地方获取/使用它

我更喜欢 vuex 方法，因为它可以确保单一的事实来源......

这里是如何使用vuex store

首先根据你使用的vue版本安装vuex，一般vue3建议使用npm i vuex@next
在您的 Store 文件夹中创建一个 src 文件夹，并在其中添加带有以下代码的 index.js

import { createStore } from "vuex";
import axios from "axios"; // I Use axios for making API CALLS hence this pkg 

const store = createStore({
  state() {
    return {
      token: null,
    };
  },
});
export default store;

这是目前应用的基本存储和状态。

让我们先开始添加动作，因为动作是用于进行 API 调用和从服务器获取数据的异步代码

actions: {
    async login(context, payload) {
      try {
        const result = await axios({
          method: "POST",
          url: "auth/login",
          data: {
            email: payload.email,
            password: payload.password,
          },
        });

        //If the Request Successed with Status 200
        if (result.status === 200) {
          //A: Extract the Token
          const token = result.data.token;
          //B. Token to LocalStorage Optional if you wish to set it to localstorgae
          localStorage.setItem("token", token);
          //c: UPDATE THE STATE by calling mutation
          context.commit("setToken", {
            token,
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
  },

下一步，您可能已经猜到会添加用于更新应用状态的突变..

mutations: {
    setToken(state, token) {
      state.token = token;
    },
  },

最后一个用于获取数据的 getter 方法是在应用组件内部计算得出的

  getters: {
    getToken(state) {
      return state.token;
    },
  },

最后，你index.js应该看起来像这样

import { createStore } from "vuex";
import axios from "axios";

const store = createStore({
  state() {
    return {
      token: null,
    };
  },
  actions: {
    async login(context, payload) {
      try {
        const result = await axios({
          method: "POST",
          url: "auth/login",
          data: {
            email: payload.email,
            password: payload.password,
          },
        });

        //If the Request Successed with Status 200
        if (result.status === 200) {
          //A: Extract the Token
          const token = result.data.token;
          //B. Token to LocalStorage Optional if you wish to set it to localstorgae
          localStorage.setItem("token", token);
          //c: UPDATE THE STATE by calling mutation
          context.commit("setToken", {
            token,
          });
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
  },
  getters: {
    getToken(state) {
      return state.token;
    },
  },
});

export default store;

注意 - 这是 vuex 代码的一般表示方式，根据您的项目要求，还有很多其他方法可以实现相同的结果以上代码不是最终代码，需要根据您的测试/示例/项目需求进行调整

Answer 2

您可以将令牌保存在 Localstorage 或 cookie 中。并根据您的需要使用。这是用于此的示例代码：

const token = 'token'

export function getToken() {
  return localStorage.getItem(token)
}

export function setToken(tokenData) {
  return localStorage.setItem(token, tokenData)
}


export function removeToken() {
  return localStorage.removeItem(token)
}

您可以使用 Vuex 进行状态管理。这是一个article

Answer 3

正如@Nishant Sham 所建议的，我只是修改了 action 中的 index.js 方法，如下所示：

import Vue from 'vue'
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
          token: ''
    },
    getters: {
      getToken(state){
        return state.token;
      }
    },
    mutations: {
        setToken(state, tokenValue){
          state.token = tokenValue;
        }
    },
    actions: {
      setToken({commit}, tokenValue){
        commit("setToken", tokenValue);
      }
    }
   });

在您的 vue 组件中，您按如下方式调用 getters 和 setters：

<script>
      //Set token value
      var token = "dwe123313e12";//random token value assigned
      this.$store.commit("setToken", token);

      .....

      //Get token value
      var getToken = this.$store.getters.getToken;
</script>

将 OAuth 令牌从一个 Vuejs 组件传递到另一个

3 个答案: