web-dev-qa-db-fra.com

Meilleure pratique pour stocker des jetons d'authentification dans VueJS?

Mon backend est une API REST servie par Django-Rest-Framework. J'utilise VueJS pour le front-end et j'essaie de comprendre quelle est la meilleure pratique pour faire l'authentification/connexion. Ceci est code probablement terrible, mais ça marche (dans un composant appelé 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
        }
    }

Est-il judicieux d'utiliser localStorage de cette façon? De plus, je me demande quand l'utilisateur veut se déconnecter et j'appelle /api-token-auth/logout, ai-je encore besoin de supprimer le jeton de localStorage? Pour moi, ce qui se passe avec les jetons n'est pas clair du côté de Django ou du navigateur/Vue.

djangoauthenticationdjango-rest-frameworkvuejs2
11
Evan Zamir

Les données à l'échelle de l'application, telles que l'authentification et les informations utilisateur, doivent passer à l'état centralisé. Vous pouvez utiliser Vuex ou n état partagé simple . Vuex est génial mais il ajoute des complications, vous devez donc compter le coût. Si vous utilisez Vuex, vous pouvez utiliser état persistant Vuex pour le conserver dans localStorage. Cela devrait être beaucoup plus rapide d'accès que localStorage. D'après mon expérience, localStorage n'est pas fiable et peut causer des problèmes. L'État est la voie à suivre.

Par exemple, modifier votre code actuel pour l'envoyer à 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
    }
}

Ensuite, dans Vuex (comme /store/modules/user.js si vous utilisez des modules):

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

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

Et appelez le jeton par un Getter ou directement:

this.$store.state.user.token

Cela suppose que le magasin est utilisé par Vue. Par exemple, dans main.js, vous auriez:

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

new Vue({
  el: '#app',
  store
})
11
For the Name