VueJSに認証トークンを格納するベストプラクティス？

Question

私のバックエンドは、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に電話すると、トークンをlocalStorageから削除する必要がありますか？ Djangoの最後かブラウザ/ Vueのトークンで何が起きているのか、私には分かりません。

Answer 1

認証やユーザー情報などのアプリケーション全体のデータは、一元化された状態にする必要があります。 Vuexまたはa simple shared stateを使用できます。 Vuexはすばらしいですが、複雑さを増すので、コストを数える必要があります。 Vuexを使用する場合は、Vuex persisted stateを使用して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 
})