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 multibox 全选
Mar 22 Javascript
日期处理的js库(迷你版)--自建js库总结
Nov 21 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
JavaScript定时器实现的原理分析
Dec 06 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
微信小程序 Storage更新详解
Jul 16 Javascript
javascript实现时钟动画
Dec 03 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
认识并使用PHP超级全局变量
2010/01/26 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
jquery插件之easing使用
2010/08/19 Javascript
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery实现下拉菜单的实例代码
2017/06/19 jQuery
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python实现的系统实用log类实例
2015/06/30 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python调用webservice接口的实现
2019/07/12 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
办理居住证介绍信
2014/01/15 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2014年基建工作总结
2014/12/12 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
心术观后感
2015/06/11 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript