Nuxt Auth模块-将JWT保存在Vuex存储中

时间:2019-06-21 16:04:22

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

登录/注销/中间件等本身可以工作,但我似乎无法控制令牌。登录后,我试图将JWT保存在Vuex存储中,但令牌仅保存在cookie和localStorage中。从文档中,我了解到Vuex中对auth的支持是自动添加的。我没有在config中定义tokenRequiredtokenType,因为根据文档,它们是基于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

1 个答案:

答案 0 :(得分:0)

我查看了身份验证模块的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保存?即使文档中说明了默认情况下可以解释为令牌的内容也保存在三个位置。

  

Auth令牌存储在各种存储提供程序(cookie,localStorage,vuex)中