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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 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
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Python 元类实例解析
2018/04/04 Python
python调用API实现智能回复机器人
2018/04/10 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
集团公司总经理岗位职责
2013/12/20 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
公司授权委托书
2014/04/04 职场文书
安全责任协议书
2014/04/21 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
企业愿景口号
2015/12/25 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书