라우팅에 입력하기 전에 토큰 Vuex 새로 고침

라우팅에 입력하기 전에 토큰 Vuex 새로 고침

Passport와 함께 Larabel에서 API를 구축한 프런트엔드 웹 앱 인터페이스를 가지고 있습니다.

문제는 페이지를 새로 고칠 때(Vuejs/Vuex로 작성된SPA에서) API와의 새로 고침 세션을 위해 토큰을 새로 고쳐야 한다는 것입니다.

main.js로 시도했지만, 그의 문제는 요구가 비동기이며 라우팅 후 응답이 도착했다는 것입니다.

main.discloss.main.discloss.

if (localStorage.getItem('refresh_token')) {
   store.dispatch('refresh_token').then(function(response){
      console.log(response);
   });
}
new Vue({
  router,
  store,
  env,
  render: h => h(App)
}).$mount('#app')

function refresh token, my API 호출 및 응답으로 새 토큰과 새 새로 고침 토큰을 설정합니다.단, 이 콜은 오래된 토큰과 새로운 토큰을 사용하여 "대시보드"에서 첫 번째 비동기 콜을 발신할 수 있는 방법으로 발신하는 것이 문제입니다.그래서 여러 가지 방법을 시도해 봤는데 좋은 방법이 있는지 모르겠어요.

제 질문은 다음과 같습니다.Vuejs App에서 vuex 스토어를 사용하여 토큰을 새로 고칠 수 있는 위치

이 제품은,mounted최상위 Vue 구성 요소의 속성입니다.토큰 새로 고침에 의존하는 다른 구성 요소가 있는 경우 이 구성 요소를 새로 고침이 완료되었음을 알리는 저장소의 상태 변수와 결합할 수 있습니다.예를 들어, 최상위 구성 요소가 있는 경우App.vue:

...

mounted () {
  store.dispatch('refresh_token')
}

...

vueex 저장소에 상태 변수 추가:

const store = new Vuex.Store({
  state: {
    sessionRefreshed: false
  },
  ..

  mutations: {
    [REFRESH_TOKEN] (state) {
      // existing mutations, and..
      state.sessionRefreshed = true
    },
  },
  ..
  actions: {
    refreshToken ({ commit }) {
      myAsyncFetchToken().then(() => commit(REFRESH_TOKEN))
    },
  }

이렇게 하면 강제로 동기화하지 않고도 전체 응용 프로그램이 새로 고침 상태를 인식할 수 있습니다.그런 다음 토큰을 새로 고쳐야 하는 구성요소가 있는 경우, 위젯, 플레이스홀더 등을 로드하고 상태가 변경될 때 감시자를 사용하여 작업을 수행할 수 있습니다.

를 사용하는 것은 어떻습니까?router#beforeEach 가드? 제한된 컴포넌트에 액세스하기 전에 인증 토큰이 쿠키에 저장되어 있는지 확인하는 데 사용합니다.토큰이 설정되지 않은 경우 로 리디렉션합니다./login.

제 시나리오가 당신이 요구하는 것과 정확히 일치한다는 것을 알고 있습니다만, 이 시나리오를 사용하여 도입을 확대해 주셨으면 합니다.

언급URL : https://stackoverflow.com/questions/54676964/refresh-token-vuex-before-enter-in-routing