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 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
Jquery截取中文字符串的实现代码
Dec 22 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
JavaScript实现HSL拾色器
May 21 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php中stream(流)的用法
2014/03/25 PHP
smarty中post用法实例
2014/11/28 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Angular实现响应式表单
2017/08/04 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python psutil监控进程实例
2019/12/17 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python实现logistic分类算法代码
2020/02/28 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
应届生护士求职信
2013/11/01 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
部队学习十八大感言
2014/01/11 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
小学生寒假家长评语
2014/04/16 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
就业意向书范本
2015/05/11 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
python神经网络Xception模型
2022/05/06 Python