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 break指定标签打破多层循环示例
Jan 20 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
很棒的vue弹窗组件
May 24 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
2015/06/23 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
python类继承用法实例分析
2014/10/10 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
在python shell中运行python文件的实现
2019/12/21 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
编辑找工作求职信范文
2013/12/16 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
环境建议书
2015/02/04 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
爱国电影观后感
2015/06/19 职场文书
运动会加油稿
2015/07/22 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技