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

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

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

第二种方法可以是将令牌设置为 localStorage 并get/use它在任何你需要的地方

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

下面是vuex store的使用方法

首先根据你使用的vue版本安装vuex，一般vue3建议使用npm i vuex@next
在您的 src 文件夹中创建一个 Store 文件夹，并在其中添加 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 代码的一般表示，根据您的项目要求，还有很多其他方法可以达到相同的结果以上代码不是最终代码，需要根据您的 test/example/project 要求

进行调整

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 所建议的，我只是修改 index.js 中的 action 方法，如下所示：

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 组件传递到另一个

Passing OAuth token from one Vuejs component to another

vue.js

vuex

vue-router

vue-props