Vuejs Router Redirect in Vuex Store After Login Updated FREE
Vuejs Router Redirect in Vuex Store After Login
Harry Gill
Posted on • Updated on
Vue SPA, router guard with redirect subsequently login
Originally published on my blog
While making Let's Organise SPA(Unmarried page Application) we bumped into the issue of properly checking Auth and redirecting when a user visited a route that required Authentication. If User is authenticated and then get to the requested page or redirect to /login page. One time the user has successfully logged in redirect them back to the requested page.
Vue Router has something called Navigation Guards to the rescue, that you tin use every bit hook earlier every route or selected routes. Navigation Guard is simply a evidently role and it works like the following.
role baby-sit ( to , from , adjacent ){ if ( store . state . auth . loggedIn ) { // or however yous shop your logged in state side by side (); // allow to enter route } else { next ( ' /login ' ); // become to '/login'; } } ... // after in the guarded routes export default [{ path : ' /membership ' , beforeEnter : guard , // Using guard before entering the road component : crave ( ' layouts/membershipLayout ' ). default , children : [ { path : '' , component : require ( ' pages/membership ' ). default }, ... ] }... ] Lawmaking above invokes the guard function at before enter hook and does a basic cheque and redirection. But really what you demand is for the router to recollect where user started the route, and also check wether user is already authenticated (maybe in some other tab).
Our application uses JWT(JSON Web Token) to authenticate Users. The JWT is not stored with client side JavaScript simply in a secure https cookie. This means that the application JavaScript can't tell wether that token is valid or is even if information technology exists for that thing. This design requires at least one round trip to the server to validate the token.
In case of User beingness already authenticated in another tab, redirecting to login folio is not a great user feel. Then you can retrieve of the flow lik following.
Router flow logic
We want to execute the logic period higher up before every guarded route is visited. We accept a place holder variable entryUrl to continue track of url user entered the site with initially set to null. Then nosotros check if we are logged in our application keeps a variable in the Vuex state, If logged in then we bank check if the entryUrl variable is not ready, then simply become to the next route equally normal. Otherwise we redirect to that entryUrl and gear up the variable to null again.
If the Vuex logged in variable not set up to truthful,(this could be if user merely visited a url without going through login folio) in and so we invoke a phone call to the server to cheque if user is already authenticated.
and then check for authentication, if yep go to the road. If every check fails and so nosotros shop the initial url visited past the user in entryUrl variable and redirect user to 'login page'.
Corresponding code to the above model looks something like.
// routes.js import store from ' ../store ' ; permit entryUrl = null ; const baby-sit = async ( to , from , next ) => { if ( store . country . auth . loggedIn ) { if ( entryUrl ) { const url = entryUrl ; entryUrl = zero ; return next ( url ); // goto stored url } else { return next (); // all is fine } } await store . dispatch ( ' checkAuth ' ); // nosotros use await equally this async request has to finish // before we can exist sure if ( store . state . auth . loggedIn ) { adjacent (); } else { entryUrl = to . path ; // store entry url before redirect adjacent ( ' /login ' ); } }; Say hi if you like on Twitter
Vuejs Router Redirect in Vuex Store After Login
DOWNLOAD HERE
Source: https://dev.to/mygnu/vue-spa-router-guard-with-redirect-after-login-2anj
Posted by: broadbentallogrishme.blogspot.com
تعليقات
إرسال تعليق