🎁 Add `user` and `isAuthenticated` getters to the Auth plugin
This addresses a problem where the user state of the auth module is no longer reactive after destructuring. To fix this issue, two getters have been added to the auth state. They are available when a userService is provided to the makeAuthPlugin options.
user
: returns the reactive, logged-in user from the userService specified in the options.isAuthenticated
: an easy to remember boolean attribute for if the user is logged in.
If you depend on a reactive, logged-in user in your apps, here is how to fix the reactivity:
Replace any reference to store.state.auth.user with store.state.getters('auth/user').
Because the user state is no longer reactive, it is logical for it to be removed in the next version. It will likely be replaced by a userId attribute in Feathers-Vuex 4.0.
For more clarity on 3.2.0, the user in state is actually reactive UNLESS you destructure.
const { user } = store.state.auth
if (user === null) {
// congrats, you just lost reactivity because it's a primitive
} else {
// the properties of the user record will be reactive.
}
As soon as null is returned (when there's no user) the reactivity is broken. Of course it works this way because a primitive can't have any reactivity on its own. The new user getter will always be reactive, whether it's null or an actual user.
const user = store.getters['auth/user']
if (user === null) {
// user itself is still reactive
} else {
// user continues to be reactive
}
Reactivity doesn't work on objects because it requires either
- the use of ES5 accessor properties (getters and setters on objects) or...
- the use of Proxy objects (like in Vue 3)
Either way, if it's not an object it can't be reactive. And I mean a real object. I thought I better clarify since typeof null === 'object', which I'm sure has to make sense for somebody.