authentication - 如何从 Vue 中的 Django JWT 令牌获取用户？

Question

我正在尝试从我的 JWT 令牌中检索用户，该令牌是从 Django-Rest API 端点提供的，/get-token/并将用户存储在我的 Vuex 商店中。

我没有设置端点来返回已登录的user，虽然这可能是一个潜在的解决方案，但我认为没有理由这样做，而不是从 JWT 令牌中检索用户。

我尝试通过this.$store.commit('setAuthUser', response.data.user)和直接从 JSON 令牌中检索用户response.data.user.username

登录.Vue

axios.post(this.$store.state.endpoints.obtainJWT, payload)
                    .then((response) => {
                        this.$store.commit('updateToken', response.data.token)
                        this.$store.commit('setAuthUser', response.data.user) -------This line is not working
                        console.log(response.data)
                    })

store.js

export default new Vuex.Store({
    state: {
        authUser: {},
        isAuthenticated: false,
        jwt: localStorage.getItem('token'),
        endpoints: {
            obtainJWT: 'http://127.0.0.1:8000/get-token/',
            refreshJWT: 'http://127.0.0.1:8000/refresh-token/',
            baseUrl: 'http://127.0.0.1:8000/main/api/',
        }
    },

    mutations: {
        setAuthUser(state, {
            authUser,
            isAuthenticated
        }) {
            Vue.set(state, 'authUser', authUser)
            Vue.set(state, 'isAuthenticated', isAuthenticated)
        },
        updateToken(state, newToken) {
            localStorage.setItem('token', newToken);
            state.jwt = newToken;
        },
        removeToken(state) {
            localStorage.removeItem('token');
            state.jwt = null;
        }
    }
});

预期：正确检索用户并使用 setAuthUser mutator 存储在 Vuex 中

实际：错误Cannot destructure property 'authUser' of 'undefined' or 'null'.

标签： authenticationvuejs2django-rest-frameworkvuexjet