Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use vue to judge and verify the login status of users. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Use vue to determine and verify the login status of a user

Navigation hooks are similar to life cycle hooks, including several cycles before entering, after entering, when updating, and before exiting. They are mainly used to control the forward, backward or jump of navigation.

Among them, router.beforeEach is the cycle before the route enters, and there are two parameters: the source and the destination of the route, which can judge and control the direction and redirection of the current route.

General router.beforeEach is used with vuex global state storage to verify the login status of users. It can also be used in combination with sessionStorage and localStorage, with the same principle.

User login status verification

Routing configuration

Define the meta attribute auth that needs to determine the login status

Const routes = [{path:'/', component: resolve = > require (['.. / components/mainTem/Filtrate.vue'], resolve), meta: {auth:true,keepAlive: false}, name:'Filtrate'}, / / Home {path:'/Home', component: resolve = > require (['.. / components/mainTem/Home.vue'], resolve), meta: {auth:true,keepAlive: true}, name:'Home'} / log in {path:'/Login', component: resolve = > require (['.. / components/mainTem/Login.vue'], resolve), meta: {auth:true,keepAlive: false}, name:'Login'}, / / the latest case {path:'/NewCase', component: resolve = > require (['.. / components/mainTem/NewCase.vue'], resolve), meta: {auth:true,keepAlive: true}, name:'NewCase'} / / recommend {path:'/Recommend', component: resolve = > require (['.. / components/mainTem/Recommend.vue'], resolve), meta: {auth:true,keepAlive: true}, name:'Recommend'}, / / personal Center {path:'/User', component: resolve = > require (['.. / components/mainTem/User.vue'], resolve), meta: {auth:true,keepAlive: true}, name:'User'} / filter {path:'/Filtrate', component: resolve = > require (['.. / components/mainTem/Filtrate.vue'], resolve), meta: {auth:true,keepAlive: false}, name:'Filtrate'}, {/ / details path:'/Detail', component: resolve = > require (['.. / components/mainTem/Detail.vue'], resolve), meta: {auth:true,keepAlive: false}, name:'Detail'}]

Monitor

I use the user token value stored by localStorage.

Business logic: if the user has no localStorage description, it is the first time to log in, then directly jump to the login page, store the localStorage value on the login page, and after the user closes the page, within 24 hours, open the page again and enter the main page directly. Use localStorage to determine whether the current token is valid or not. If it is invalid, prompt the login has timed out and jump to the login page again.

Meta

It is determined only if the meta auto attribute is set to true in the route, so that all routing settings are set.

To

To is a backward routing object, including complete information about the route.

From

From is the routing object from which to jump

Next ()

Next () controls the route down and redefines the route next of the route jump ('routing path)

/ * * verify whether the user is logged in * * / router.beforeEach ((to,from,next) = > {if (to.matched.some (m = > m.meta.auth)) {/ / console.log ("determine whether to log in first"); if (to.name=='Login') {next () } else {if (localStorage.getItem ('token')) {/ / access server cache data to determine whether the current token fails Vue.http.get ("http:xxxx/Login/UserIsLogin?token=" + localStorage.getItem (' token') + & url= + to.name, {withCredentials: true}) .then (response = > response.json ()) .then (num = > {/ / console.log ('login', num) If (num.code==1001) {next ();} else {alert ('your token has timed out, please log in again'); next ('/ Login');}})} else {next ('/ Login');} else {console.log ("Please sign in first") Next ()}}) this is the end of the article on "how to use vue to judge and verify the login status of users". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.