As I delved into learning the ins and outs of Nuxt.js, I encountered a challenge while working with its Auth module.
After successfully logging in, my goal was to verify the scope of the accounts. I attempted to achieve this by utilizing the "scopeKey" property of "Auth". The backend provides the "scope" from the database, which can either be "user" or "admin".
I experimented with setting the scope using
scopeKey: 'scope'
However, I found that the scope returned as "undefined"/"null" when checking with
this.$auth.hasScope('admin') / this.$auth.hasScope('user')
or "this.$auth.hasScope(admin)" yielded an empty result when configuring "scopeKey" as
scopeKey: 'data.scope'
or
scopeKey: 'user.scope'
Here is my current auth strategy:
auth: {
strategies: {
local: {
scopeKey: 'scope',
endpoints: {
login: {
url: 'api/auth/login',
method: 'post',
propertyName: 'token',
},
logout: {
url: 'api/auth/logout',
method: 'get'
},
user: {
url: 'api/me',
method: 'get',
propertyName: data
}
}
}
},
redirect: {
login: '/auth/login',
logout: '/',
callback: '/auth/login',
home: '/dash/'
}
}
Additionally, here is a snippet of the JSON structure that the auth module references upon login:
"data": {
"id": 2,
"name": "test1",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f2e3f5f2c6f2e3f5f2a8e5e9eb">[email protected]</a>",
"email_verified_at": null,
"scope": "admin",
"created_at": "2019-08-01 13:11:49",
"updated_at": "2019-08-01 13:11:49"
},
While I am able to access the scope value on the frontend page with
$auth.user.scope
or
$auth.$state.user.scope
The challenge remains in assigning the "scope" to the "scopeKey" property within the nuxt.config.js file when defining the "auth" properties/strategy.
Edit:
I have explored moving it inside the auth object or removing the property altogether, yet I continue to receive false results for $auth.hasScope('admin') and $auth.hasScope('user'), indicating that scopeKey remains undefined, leaving me puzzled.