如何使用 vue.js、vuex 和 django Rest 框架将简单 JWT 令牌保存在本地存储中？

Question

我在本地存储（或 cookie）中保存 JWT 令牌时遇到问题。现在，当我刷新页面时，我需要再次登录。当我使用用户名和密码发布到 /api-token 作为响应时，我获得了访问令牌和刷新令牌，但现在不知道如何存储它们以及在哪里存储它们。

我的loginForm.vue：

(<form...)

<script>
import axios from 'axios';

export default {
  name: 'LoginForm',
  data(){
      return{
          username: '',
          password: '',
      }
  },
  methods: {
      login(){
          this.$store.dispatch('userLogin', {
              username: this.username,
              password: this.password
          })
          .then(() => {
              this.$router.push({ name: 'home'})
          })
          .catch(err => {
              console.log(err)
        })
  }
}
}
</script>

和我的 store.js：

import Vue from 'vue'
import Vuex from 'vuex'
import { getAPI } from './api'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        accessToken: null,
        refreshToken: null,
    },
    mutations: {
        updateStorage (state, { access, refresh }) {
            state.accessToken = access
            state.refreshToken = refresh
        },
        destroyToken (state) {
            state.accessToken = null
            state.refreshToken = null
        }
    },
    getters: {
        loggedIn (state) {
            return state.accessToken != null
        }
    },
    actions: {
        userLogin (context, usercredentials){
            return new Promise((resolve, reject) => {
                getAPI.post('/api-token/', {
                    username: usercredentials.username,
                    password: usercredentials.password
                })
                .then(response => {
                    context.commit('updateStorage', {access: response.data.access, refresh: response.data.refresh})
                    resolve()
                })
            })
        },
        userLogout (context) {
            if (context.getters.loggedIn) {
                context.commit('destroyToken')
            }
        }
    }
})

我假设我需要在更新之后和销毁之前通过 store.js 将它们保存在本地存储中。你可以帮帮我吗？

Answer 1

你需要这样的东西：

您必须在每次请求后将访问令牌保存在默认标头中以对用户进行身份验证。还将令牌保存在本地存储中：

axios.post('login', this.user)
.then(r=>
{
     axios.defaults.headers.common['Authorization'] = 'Bearer ' + r.data.token;

     localStorage.setItem( 'token', JSON.stringify(r.data.token) );
}

并在刷新时添加到默认标头：（main.js 文件顶部）

let token = JSON.parse( localStorage.getItem('token') );
if( token ){
     window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
}

现在您可以从每个组件发送请求