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
}

通过Getter或直接调用令牌：

this.$store.state.user.token

这假设商店由Vue使用。例如，在main.js中你将拥有：

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

new Vue({
  el: '#app',
  store
})

Answer 2

我有一个 Web 应用程序，它在 Vuex 中存储令牌/刷新令牌，并且仅在商店初始化时才从 localStorage 加载数据。它运行良好，直到我们的用户报告他们一直收到 403 错误。发现他们正在使用 2 个（或更多）浏览器选项卡打开。获取刷新令牌后，我们的新令牌将保存到状态和本地存储中，但另一个选项卡没有通知数据更改，因此他们使用旧令牌/刷新令牌来获取，并且失败:'(

我花了几个小时的重新制作和调试，现在我再也不会把令牌放在Vuex里面了

在VueJS中存储auth令牌的最佳实践？

2 个答案: