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

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

我的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将它们保存在本地存储中。你能帮我吗？

你需要这样的东西：

每次请求后，必须将访问令牌保存在默认标头的请求中，以验证用户。还可以将令牌保存在本地存储中：

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

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

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

---

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

此问题与vue无关，您可以保存在localstorage或cookie中，我更希望localstorage作为请求之间共享的cookie，增加读取localstorage时的开销

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

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

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