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技巧
Dec 06 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
处理canvas绘制图片模糊问题
May 11 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制作图型计数器的例子
2006/10/09 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
PHP基础知识回顾
2012/08/16 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
js获取class的所有元素
2013/03/28 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
几种tab切换详解
2017/02/03 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python开发入门——列表生成式
2020/09/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
德尔福集团DELPHI的笔试题
2012/02/22 面试题
视光学毕业生自荐书范文
2014/02/13 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年科室工作总结
2015/04/10 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS