vue路由跳转时判断用户是否处于登录状态

左手的ㄟ右手 2022-03-19 05:36 454阅读 0赞

> # vue路由跳转时 判断用户是否处于 登录状态 #
> 
> --------------------
> 
>  
> 
> 1.  引入[vue][]x 在其中存储用户状态

import Vue from ‘vue‘
    import Vuex from ‘vuex‘
    
    Vue.use(Vuex);
    var state = {
      isLogin:0,     //初始时候给一个 isLogin=0 表示用户未登录
    };
    
    const mutations = {
      changeLogin(state,data){
        state.isLogin = data;
      }
    
    };

> 2.在用户登录时改变登录状态

this.$store.commit(‘changeLogin‘,‘1‘)   
    //登录后改变登录状态 isLogin = 1 ；

> 3.路由入口加上导航钩子

{ path: ‘/admin‘, 
      component: Admin,
      meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了
    
      }

*  4.路由跳转并校验

router.beforeEach((to,from,next) => {   
    
    if(to.matched.some( m => m.meta.auth)){     
    
    // 对路由进行验证     
    if(store.state.isLogin==‘100‘) { // 已经登陆       
    next()   // 正常跳转到你设置好的页面     
    }
    else{       
    
    // 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
    
    　　 　　　　next({path:‘/login‘,query:{ Rurl: to.fullPath} })
     　　　　　} 
    　　　　}else{ 
    　　　　　　next() 
    　　} 
    })

[vue]: https://www.baidu.com/s?wd=vue&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 44 阅读

相关 vue判断是否登录，若未登录跳转登录页

需要使用vuex，在state中存储一个isLogin字段，用于判断是否登录 export const store = new Vuex.Store({

川长思鸟来/ 2023年06月30日 01:33/ 0 赞/ 9 阅读

相关 vue 判断是否登录，未登录跳转到登录页

网页一进入判断是否登录，未登录跳转到登录页面 router.js export default new Router({ routes: [

绝地灬酷狼/ 2023年06月04日 14:59/ 0 赞/ 33 阅读

相关如何解决每次向后台发起请求时判断用户是否处于登录状态？

事件起因：小x向我反应用户在我开发的系统中，在其中一个功能上待了很长时间，当用户跳转到其他界面上时，突然就掉线了。

末蓝、/ 2022年06月18日 11:47/ 0 赞/ 702 阅读

相关 angular 未登录状态拦截路由跳转

使用angularjs的但页面应用时，由于是本地路由在控制页面跳转，但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面。 angularjs是mvc架构所以实现起来

青旅半醒/ 2022年06月07日 05:13/ 0 赞/ 296 阅读

相关 VUE登录路由判断

VUE登录路由判断我们在做无论是网站，还是电商的时候，登录

骑猪看日落/ 2022年05月16日 05:50/ 0 赞/ 240 阅读

相关 vue路由跳转时判断用户是否处于登录状态

> vue路由跳转时判断用户是否处于登录状态 > > -------------------- > > > > 1. 引入[vue][]x 在其中存储用户状

左手的ㄟ右手/ 2022年03月19日 05:36/ 0 赞/ 455 阅读

相关 vue-router 钩子函数（路由拦截)，判断用户是否登录，未登录拦截

1、全局的钩子 beforeEach（to，from，next） afterEach（to，from，next） 2、组建内的导航钩子组件内的导航钩子主要有这三种：

野性酷女/ 2022年01月29日 13:23/ 0 赞/ 381 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 531 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 502 阅读