Jer*_*Men 3 javascript authentication vue.js vuex nuxt.js
我正在尝试将“Nuxt 身份验证模块”集成到我的 Nuxt 应用程序中。
我已经配置了我的代理和身份验证模块并设置了“本地策略”。
https://auth.nuxtjs.org/schemes/local.html
我的“登录”端点工作正常,我将“propertyName”设置为“access_token”,因为这是我的令牌值所在的位置。我看到 'Vuex' 将我的 'LoggedIn' 状态更新为 true,我还可以在 Chrome 的“网络”选项卡中看到令牌响应。
但是,我真的很难理解“用户”端点的工作原理。
给出的例子:
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/api/auth/login', method: 'post', propertyName: 'token' },
logout: { url: '/api/auth/logout', method: 'post' },
user: { url: '/api/auth/user', method: 'get', propertyName: 'user' }
},
tokenRequired: true,
tokenType: 'bearer'
}
}
}
Run Code Online (Sandbox Code Playgroud)
以上与我的几乎相同,“用户”端点如何知道哪个用户已登录?
我正在使用第三方系统进行身份验证,因为我正在将应用程序集成到第三方系统中。他们用于 REST 的“用户”端点需要“ID”或“用户名”才能返回有关特定用户的详细信息。
我的“登录”响应包含“用户名”,我可以用它来调用后续的用户端点(如果我知道的话)。
有谁知道 User 端点是如何工作的?基本上我需要这样调用:
user: {
url: '/users/${userId}',
method: 'get',
propertyName: 'data'
}
Run Code Online (Sandbox Code Playgroud)
也面临这个问题。
我的解决方案:
auth: {
strategies: {
local: {
endpoints: {
// login api
login: {
url: '/api/v1/users/login',
method: 'post',
propertyName: 'token'
},
// logout api
logout: {
url: '/api/v1/users/logout',
method: 'post'
},
user: false // setting user fetch api to false
},
redirect: {
login: '/login',
logout: '/login',
callback: '/login',
home: '/'
},
}
}
},
Run Code Online (Sandbox Code Playgroud)
loginWith()您可以使用函数setUniversal(key, value, isJson)来保存获取的用户并使用函数获取它getUniversal(key) async login(user) {
await this.$auth.loginWith('local', {
data: user
}).then(res => {
let user = res.data.data.user // getting user (yours can be different)
this.$auth.$storage.setUniversal('user', user, true) // setting user in Vuex, cookies and localstorage
user = this.$auth.$storage.getUniversal('user') // getting user (you can use it anywhere in your app)
console.log(user) // checking user
this.$router.push('/') // redirecting after login
}).catch(err => {
console.log(err.response)
})
}
Run Code Online (Sandbox Code Playgroud)
computedcomputed: {
user() {
return this.$auth.$storage.getUniversal('user');
}
}
Run Code Online (Sandbox Code Playgroud)
PS:注销,使用logout()函数,并在回调中使用this.$auth.$storage.removeUniversal('user')从任何地方删除它