한 Vuejs 구성 요소에서 다른 구성 요소로 OAuth 토큰 전달

한 Vuejs 구성 요소에서 다른 구성 요소로 OAuth 토큰 전달

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소품 방법을 사용하려고 했지만 스크립트 태그에 토큰 값을 가져올 수 없었습니다. 다른 방법을 사용할 수 없습니다.$emit및 사용vuex문제에 대한 최선의 방법과 올바른 해결책을 제시해 주십시오.

@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>

로컬 저장소 또는 쿠키에 토큰을 보관할 수 있습니다.그리고 필요에 따라 사용하세요.이 샘플 코드는 다음과 같습니다.

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상태 관리용입니다.여기 기사가 있습니다.

이를 위한 한 가지 방법은 vuex일 수 있습니다.

루트에서 토큰 필드를 생성하고 임의의 vue 구성 요소 및 라이프 사이클 후크에서 호출할 수 있는 getter를 하나 만듭니다.

두 번째 방법은 토큰을 localStorage로 설정하고 필요한 장소에서 입수/사용하는 것입니다.

나는 vuex 방식을 선호한다 하나의 진실의 원천이 보장되는 방식으로...

vuex 스토어의 사용 방법은 다음과 같습니다.

1. 먼저 사용하는 vue 버전에 따라 vuex를 설치합니다.일반적으로 vue3의 경우 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;

현재 앱의 기본 스토어 및 상태입니다.

3. 액션은 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);
      }
    },
  },

4. 다음 단계는 앱 상태 업데이트에 사용되는 변환 추가입니다.

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

5. 마지막으로, 앱 구성 요소 내에서 계산된 데이터를 가져오는 데 사용할 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의 코드가 프로젝트 요건에 따라 동일한 결과를 얻을 수 있는 방법이 많이 있는 것처럼 보이는 일반적인 표현입니다.위 코드는 최종 코드가 아닙니다.테스트/예시/프로젝트 요건에 따라 조정해야 하기 때문입니다.

언급URL : https://stackoverflow.com/questions/67553418/passing-oauth-token-from-one-vuejs-component-to-another