After login i set inside store and inside localStorage the variable "authenticated" = true.
How can i check in each page if authenticated==true and show different menu element?
(i'm using ssr)
Thanks
Add a comment
|
2 Answers
- Set Vuex state
authenticatedat the point of login. - Be sure to clear that when you logging user out or app is starting and you are checking e.g. if JWT is still valid.
Set computed variable in components requiring that state.
computed() { authenticated () => { return this.$store.state.authenticated } }Use it in your template with
<v-if>.
Good luck!
Comments
If you do not want to use Vuex,
- Set the initial state
{ authenticated: false }with vue-persistent-state. - Use
this.authenticatedas you would in a vanilla Vue app.
Example:
import persistentStorage from 'vue-persistent-storage';
const initialState = {
authenticated: false
};
Vue.use(persistentStorage, initialState);
Vue.component('my-login', {
methods: {
login: function () {
doLogin() // call to auth API
.then(() => { this.authenticated = true })
.catch(() => { this.authenticated = false })
}
}
})
new Vue({
el: '#app',
created: function () {
if (loginIsValid) { // check auth validity upon app bootup
this.authenticated = true
} else {
this.authenticated = false
}
}
})
Now authenticated is available as data in all components and Vue instances. Any changes to this.authenticated will be stored in localStorage, and you can use this.authenticated as you would in a vanilla Vue app.
If you want to understand how this works, the code is pretty simple. It basically
- adds a mixin to make
initialStateavailable in all Vue instances, and - watches for changes and stores them.
Disclaimer: I'm the author of vue-persistent-state.
Comments
