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 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript获取路径设计源码
May 22 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
详解node中创建服务进程
May 09 Javascript
node文字生成图片的示例代码
Oct 26 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模板中出现空行解决方法
2011/03/08 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
PHP中16个高危函数整理
2019/09/19 PHP
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
JavaScript模块化开发之SeaJS
2015/12/13 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
利用python画出折线图
2018/07/26 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
用友笔试题目
2016/10/25 面试题
企业面试题试卷附带答案
2015/12/20 面试题
个人简历自我评价
2014/01/06 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
优秀中学生事迹材料
2014/01/31 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
音乐之声观后感
2015/06/04 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
MySQL主从切换的超详细步骤
2022/06/28 MySQL