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

左手的ㄟ右手 2022-03-19 05:36 399阅读 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 条评论，399人围观）

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

相关阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 218 阅读

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

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

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

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

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

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

相关路由守卫-vue切换路由登录判断、条件判断

在vue项目中，切换路由时肯定会碰到需要登录的路由，其原理就是在切换路径之前进行判断，你不可能进入页面再去判断有无登录重新定向到login，那样的话会导致页面已经渲染以及它的各

清疚/ 2022年05月17日 07:53/ 0 赞/ 260 阅读

相关 VUE登录路由判断

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

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

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

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

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

相关 vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面: router.b

左手的ㄟ右手/ 2022年03月10日 13:07/ 0 赞/ 1786 阅读

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

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

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

相关【Vue】路由跳转

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

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

相关【Vue】路由跳转

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

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