时间戳

首页 > 解决方案 > 将 OAuth 令牌从一个 Vuejs 组件传递到另一个

vue.js - 将 OAuth 令牌从一个 Vuejs 组件传递到另一个

问题描述

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

           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 方法，但无法将令牌值获取到脚本标记，不确定用于传递的其他方法，即 using$emit和 using vuex。请提出问题的最佳方法和正确的解决方案。

标签： vue.jsvuexvue-routervue-props

解决方案

一种方法可能是 vuex

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

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

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

这里是如何使用 vuex 商店

  1. 首先根据你使用的 vue 版本安装 vuex，一般情况下，对于 vue3 建议使用npm i vuex@next

  2. 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;

这是您应用程序的基本商店和状态。

  1. 让我们首先开始添加操作，因为操作是用于进行 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);
      }
    },
  },
  1. 下一步，您可能已经猜到添加突变，用于更新您的应用程序状态..
mutations: {
    setToken(state, token) {
      state.token = token;
    },
  },
  1. 最后一个 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 代码应该如何看起来有很多其他方法可以实现相同结果的一般表示，具体取决于您的项目要求 上面的代码不是最终代码，因为它需要进行调整根据您的测试/示例/项目要求

推荐阅读