Nuxt Auth 模块 - 将 JWT 保存在 Vuex 商店中答案

【问题标题】：Nuxt Auth Module - save JWT in Vuex storeNuxt Auth 模块 - 将 JWT 保存在 Vuex 商店中
【发布时间】：2019-11-04 12:17:23
【问题描述】：

登录/注销/中间件等本身可以工作，但我似乎无法控制令牌。登录后我试图将 JWT 保存在 Vuex 存储中，但令牌仅保存在 cookie 和 localStorage 中。从文档中我了解到，Vuex 中对身份验证的支持是自动添加的。我没有在配置中定义 tokenRequired 和 tokenType，因为根据文档，它们是基于 cookie 的流程所需要的（添加它们也没有改变任何东西）。

nuxt.config.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth'
],
axios: {
    baseURL: 'https://api.example.com/'
},
router: {
    middleware: ['auth']
},
auth: {
    strategies: {
        local: {
            endpoints: {
                login: { url: 'login', method: 'post', propertyName: 'token' },
                logout: { url: 'logout', method: 'post' },
                user: false
            }
        }
    },
    redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/'
    }
},

登录功能

await this.$axios.post('authenticate', {
    email: this.email,
    password: this.password
}).then(response => {
    if (response.success === 'true') {
        this.$auth.setUserToken(response.token)
    } else {
        //alert invalid login
    }
}).catch(error => {
    //alert server error
});

现在，当我成功登录并查看 $auth.$state 时，它会返回

{ "user": {}, "loggedIn": true, "strategy": "local" }

我希望令牌也保存在$auth。

我还查看了question with similar title，但他们的解决方案对我不起作用，因为我使用的是user: false。

【问题讨论】：

标签： javascript authentication vue.js vuex nuxt.js

【解决方案1】：

我查看了 auth-module 的 default.js 文件并尝试了我的 nuxt.config.js 中的默认值。将默认设置添加到我的配置后，它开始工作。所以现在我可以禁用 cookie 和 localStorage，同时只将 JWT 保存到存储中。

auth: {
    strategies: {
        local: {
            endpoints: {
                login: { url: 'login', method: 'post', propertyName: 'token' },
                logout: { url: 'logout', method: 'post' },
                user: false
            }
        }
    },
    redirect: {
        login: '/login',
        logout: '/',
        callback: '/login',
        home: '/'
    },
    cookie: false,
    localStorage: false,
    token: {
        prefix: 'token.'
    },
},

然后$auth.$state 返回

{ "user": {}, "loggedIn": true, "strategy": "local", "token.local": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c" }

如果有人解释了为什么默认值不起作用以及为什么我必须将它包含在我的配置中，请告诉我。我假设出于某种原因他们默认禁用了 Vuex 保存？即使文档说明了默认情况下可以解释的内容，令牌也保存在三个位置。

身份验证令牌存储在各种存储提供程序（cookie、localStorage、vuex）中

【讨论】：