web-dev-qa-db-ja.com

VueJSに認証トークンを保存するためのベストプラクティス？

私のバックエンドはREST Django-Rest-Frameworkによって提供される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を呼び出しましたが、localStorageからトークンを削除する必要がありますか？ Djangoの端またはブラウザ/ Vueのトークンで何が起こっているのかは、実際にはわかりません。

djangoauthenticationdjango-rest-frameworkvuejs2
11
Evan Zamir

認証やユーザー情報などのアプリケーション全体のデータは、一元化された状態にする必要があります。 Vuexまたは 単純な共有状態 を使用できます。 Vuexは素晴らしいですが、複雑さを増すため、コストを計算する必要があります。 Vuexを使用する場合は、 Vuex永続状態 を使用してlocalStorageに保持できます。これは、localStorageよりもはるかに高速にアクセスできます。私の経験では、localStorageは信頼性が低く、問題を引き起こす可能性があります。状態は進むべき道です。

たとえば、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
}

そして、ゲッターによって、または直接トークンを呼び出します：

this.$store.state.user.token

これは、ストアがVueによって使用されることを前提としています。たとえば、main.jsでは次のようになります。

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

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