javascript - How to give access to page in Vue.js only if a user is logged in / localStorage exists? -
i have simple vue.js application, using vue-router this. index.html
<p> <router-link to="/" exact> home </router-link> <router-link to="/about"> </router-link> <router-link to="/contact"> contact </router-link> <router-link to="/login"> login </router-link> <router-link to="/register"> register </router-link> </p> <router-view></router-view> and have in /routes.js
import vuerouter 'vue-router'; let routes = [ { path: '/', component: require('./components/home.vue') }, { path: '/about', component: require('./components/about.vue') }, { path: '/login', component: require('./components/login.vue') }, { path: '/register', component: require('./components/register.vue') } ]; export default new vuerouter({ mode: 'history', routes }); i have index.js file initialized app, think should within created(){} module not sure how done.
i can set/unset sessions, need know how give access page if session exists.
you can use navigation guards verify data before transition of page conclude.
it depends. navigation guards can verify if user logged before transition of pages. eg:
if user on /home , wants go /dashboard, before user enter on /dashboard, navigation guard verify if user logged. if yes, continue /dashboard, if not, redirect /login.
internally, can set data of user when login. has many ways thing must consider security of system, etc.
this other question has simple example verify user logged , this article shows how verification using vuex, being more intesting.
Comments
Post a Comment