Vue routing jumps to determine if the user logs in function

by determining whether the user is logged off, logged if not jump to the login login route, if the log normal jump.

Firstly, a Dian respectively before and after the user logs on to identify whether a state of the user login (recommended vuex);

Simple vuex represented by, for no See Quguan network can own multiple;

  import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex); var state = {isLogin: 0, // initial time indicates to a user is not logged isLogin = 0}; const mutations = {changeLogin (state, data) {state.isLogin = data;}};  


 this $ store.commit ( 'changeLogin', '100') // log;  bis Dian change the login state when the user logs. change the login status isLogin = 100;  

Wed and the focus here;

in your route plus navigation inlet hook, what is meant to see specific codes;

Dian provided a route to be verified

  {path: '/ admin', component: Admin, meta: {auth: true} // set the current route does not require verification of the need to check the route would not have written; do not ask why he went to see the official website} 

Second, routing and checks

 Router.BeForeeach ((to, from , Next) => {if (to.matched.some (m => m.meta.auth) {// Verify the route IF (Store.State.Slogin == '100') {// Logged in NEXT () // Normal jump to you set the page} Else {// Not logged to the login interface, query: {rurl: to.FullPath} means that the current routing information is passed to easily log in and jump back; Next ({path: '/ login ", query: {rotl: to.FullPath}}}}}}} else {next ()}}   
These VUE When the route jump is judged whether the implementation of the user’s login function is the full content of Xiaobian sharing, I hope I can give you a reference, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment