인증 토큰을 VueJ에 저장하는 모범 사례

인증 토큰을 VueJ에 저장하는 모범 사례

제 백엔드는 Django-Rest-Framework에서 제공하는 REST API입니다.프런트 엔드로 VueJs를 사용하여 인증/로그인을 위한 베스트 프랙티스를 찾고 있습니다.이것은 아마 끔찍한 코드일 것입니다만, 동작합니다(이 컴포넌트에서는,Login.vue):

    methods: {
        login () {
            axios.post('/api-token-auth/login/', {
                username: this.username,
                password: this.pwd1
            }).then(response => {
                localStorage.setItem('token', response.data.token)
            }).catch(error => {
                console.log("Error login")
                console.log(error)
            })
            this.dialog = false
        }
    }

를 사용하는 것이 이치에 맞습니까?localStorage이쪽으로요?또, 유저가 언제 로그아웃 하고 싶은지 궁금해서 전화드렸습니다./api-token-auth/logout토큰을 삭제해야 합니까?localStorageDjango 측에서도 브라우저/Vue에서도 토큰이 어떻게 되는지 정확히 알 수 없습니다.

인증이나 사용자 정보 등 애플리케이션 전체의 데이터는 중앙 집중화 상태로 이행해야 합니다.Vuex 또는 단순 공유 상태를 사용할 수 있습니다.Vuex는 훌륭하지만 복잡하기 때문에 비용을 계산해야 합니다.Vuex를 사용하는 경우 Vuex 지속 상태를 사용하여 localStorage에 유지할 수 있습니다.이 방법은 local Storage보다 훨씬 더 빠르게 액세스할 수 있습니다.지금까지의 경험으로는 local Storage는 신뢰성이 떨어지고 문제를 일으킬 수 있습니다.국가는 가는 길이다.

예를 들어 현재 코드를 Vuex로 전송하도록 수정하는 방법은 다음과 같습니다.

    methods: {
    login () {
        axios.post('/api-token-auth/login/', {
            username: this.username,
            password: this.pwd1
        }).then(response => {
            that.$store.commit('LOGIN_SUCCESS', response)
        }).catch(error => {
            console.log("Error login")
            console.log(error)
        })
        this.dialog = false
    }
}

그런 다음 Vuex에서 다음을 수행합니다(모듈을 사용하는 경우 /store/modules/user.js 등).

Vue.use(Vuex)
const state = { token: null}
const mutations = {

LOGIN_SUCCESS(state, response) {
    state.token = response.token
}
export default {
    state,
    mutations
}

또한 토큰을 Getter 또는 직접 호출합니다.

this.$store.state.user.token

이것은 Vue가 스토어를 사용하고 있다고 가정합니다.예를 들어 main.js에는 다음과 같은 것이 있습니다.

import store from './store/index.js'

new Vue({
  el: '#app',
  store
})

Vuex 내에 토큰/갱신 토큰을 저장하고 스토어가 초기일 때만 localStorage에서 데이터를 로드하는 웹 앱을 가지고 있습니다.403 에러가 계속 발생한다고 유저에게 보고할 때까지 정상적으로 동작합니다.2개 이상의 브라우저 탭이 열려 있는 것을 확인.새로 고침 토큰을 가져오면 새 토큰이 상태 및 로컬 스토리지에 저장되지만 다른 탭은 데이터 변경에 대해 알리지 않으므로 이전 토큰/새로 고침 토큰을 사용하여 가져오는데 실패합니다.' (

재작성과 디버깅에 몇 시간이 걸렸습니다.이제 다시는 Vuex에 토큰을 넣지 않겠습니다.

언급URL : https://stackoverflow.com/questions/45384172/best-practice-for-storing-auth-tokens-in-vuejs