vue路由跳转时判断用户是否登录功能的实现


Posted in Javascript onOctober 26, 2017

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转。

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex);

简单用vuex表示一下,不会可以自己去官网多看看;

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;
  }

};

二丶在用户登录时改变登录状态;

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

三丶重点来了;

在你的路由入口加上导航钩子,具体什么意思看代码;

一丶设置需要校验的路由

{ path: ‘/admin‘, 
  component: Admin,
  meta:{auth:true} // 设置当前路由需要校验  不需要校验的路由就不用写了;不要问为什么,自己去看官网

  }

二丶路由跳转并校验

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路由跳转时判断用户是否登录功能的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
webpack3之loader全解析
Oct 26 #Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 #Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 #Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 #Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 #Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 #Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 #Javascript
You might like
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
详谈js遍历集合(Array,Map,Set)
2017/04/06 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
详解Python命令行解析工具Argparse
2016/04/20 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
建筑安全生产目标责任书
2014/07/23 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
大二学年个人总结
2015/03/03 职场文书
技术员岗位职责范本
2015/04/11 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
歌剧魅影观后感
2015/06/05 职场文书