그리고 미국의 광고 대행사 뷰 라우터와 Vuex를 사용할 때 액세스 토큰을 새로 고치는지 확인합니다.

그리고 미국의 광고 대행사 뷰 라우터와 Vuex를 사용할 때 액세스 토큰을 새로 고치는지 확인합니다.

나는 간단한 VueCLIauth 모듈 axios과 Vuex을 사용하여 만들었습니다.

인store.js나는 토큰에서 api을 사용한 것으로 모든 논리가 있어요.session.js:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import sessionSerivce from '@/services/session.js'

Vue.use(Vuex)
Vue.use(require('vue-cookies'))

export const store = new Vuex.Store({
  state: {
    status: '',
    accessToken: $cookies.get('accessToken') || '',
    refreshToken: $cookies.get('refreshToken') || '',
    user: $cookies.get('user') || '',
  },
  actions: {
    login({ commit }, data) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        sessionSerivce
          .logIn(data)
          .then((resp) => {
            const commitData = {
              accessToken: resp.data.access_token,
              refreshToken: resp.data.refresh_token,
              user: resp.data.user,
            }

            $cookies.set('accessToken', commitData.accessToken)
            $cookies.set('refreshToken', commitData.refreshToken)
            $cookies.set('user', JSON.stringify(commitData.user))

            axios.defaults.headers.common['Authorization'] =
              commitData.accessToken

            commit('auth_success', commitData)
            resolve(resp)
          })
          .catch((err) => {
            commit('auth_error')
            $cookies.remove('accessToken')
            $cookies.remove('refreshToken')
            $cookies.remove('user')
            reject(err)
          })
      })
    },

    verifyToken({ commit, state }) {},

    register({ commit }, data) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        sessionSerivce
          .register(data)
          .then((resp) => {
            const commitData = {
              accessToken: resp.data.access_token,
              refreshToken: resp.data.refresh_token,
              user: resp.data.user,
            }

            $cookies.set('accessToken', commitData.accessToken)
            $cookies.set('refreshToken', commitData.refreshToken)
            $cookies.set('user', JSON.stringify(commitData.user))

            axios.defaults.headers.common['Authorization'] =
              commitData.accessToken

            commit('auth_success', commitData)
            resolve(resp)
          })
          .catch((err) => {
            commit('auth_error')
            $cookies.remove('accessToken')
            $cookies.remove('refreshToken')
            $cookies.remove('user')

            reject(err)
          })
      })
    },

    logout({ commit }) {
      return new Promise((resolve, reject) => {
        commit('logout')
        $cookies.remove('accessToken')
        $cookies.remove('refreshToken')
        $cookies.remove('user')
        delete axios.defaults.headers.common['Authorization']
        resolve()
      })
    },
  },
  mutations: {
    auth_request(state) {
      state.status = 'loading'
    },
    auth_success(state, commitData) {
      state.status = 'success'
      state.accessToken = commitData.accessToken
      state.refreshToken = commitData.refreshToken
      state.user = commitData.user
    },
    auth_error(state) {
      state.status = 'error'
    },
    refresh_token(state, accessToken) {
      state.accessToken = accessToken
    },
    logout(state) {
      state.status = ''
      state.accessToken = ''
      state.refreshToken = ''
      state.user = ''
    },
  },
  getters: {
    isLoggedIn: (state) => {
      return !!state.accessToken
    },
    authStatus: (state) => state.status,
  },
})

인main.js제가 확인해 보기:이 기능을 사용한다.

router.beforeEach(async (to, from, next) => {

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.getters.isLoggedIn) {
      next()
      return
    }

    next('/login')
  } else next()
})

문제는 Vuex에서 수표 위에 코드 경우에만 액세스 토큰 존재한다는 점이다.나는 그것이 성공적으로 나는 api과 새로 고침 토큰을 사용하여 그것은 새로 고치고 싶지 않auth을 요구하는 길, 전에 api을 사용하여 확인하려는.만약 둘 다 unsuccessful(액세스 및 새로 고침 토큰은 둘 다 잘못된)사용자를 접속할.

는 auth을 요구한다 예를 들어 경로:.

path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: {
  requiresAuth: true,
},

나는 이런:코드를 써 왔다.

router.beforeEach(async (to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.state.accessToken) {
      await store.dispatch('verifyToken')

      if (store.getters.isLoggedIn) {
        next()
        return
      }
    }
    next('/login')
  } else next()
})

Vuex에 액션:

verifyToken({ commit, state }) {
      const accessToken = state.accessToken
      const refreshToken = state.accessToken
      sessionSerivce
        .verifyToken(accessToken)
        .then((resp) => {})
        .catch((err) => {
          sessionSerivce
            .refreshToken(refreshToken)
            .then((resp) => {
              console.log('Refreshuje token')
              const accessToken = resp.data.access_token
              localStorage.setItem('accessToken', accessToken)
              axios.defaults.headers.common['Authorization'] = accessToken
              commit('refresh_token', accessToken)
            })
            .catch((err) => {
              commit('logout')
              localStorage.removeItem('accessToken')
              localStorage.removeItem('refreshToken')
              delete axios.defaults.headers.common['Authorization']
            })
        })
    },

당신은 이전 코드에서 볼 수 있도록 코드에서 i지만 나 그냥 나는 쿠키를 사용하고 있습니다 저의 마음을 바꿨어, localstorage을 사용했습니다.

예상대로 불행하게도 이 코드- 일하지 않았다.if (store.getters.isLoggedIn) { next(); return; }전에 실행하고 있어요await store.dispatch('verifyToken')끝난, 이는 나쁘다.

아이디어가 있으신가요?

참조URL:https://stackoverflow.com/questions/66034955/verify-and-refresh-jwt-access-token-in-using-vue-router-and-vuex