Vue 使用beforeEach实现登录状态检查功能


Posted in Javascript onOctober 31, 2019

使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求。

1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中。

2.使用beforeEach实现登录状态检查

vueRouter.beforeEach((to, from, next) => {
  //store的getters中定义获取用户信息的函数 getUser
  //userId为空说明用户未登录
  let isLogin = store.getters.getUser.userId;
  if (!isLogin) {//未登录
    if (to.path !== '/login') {//跳转到登录页
      return next({path: '/login'});
    }else {
      next();
    }
  }else {//已登录
    if (to.path === '/login') {//跳转到首页
      return next({path: '/index'});
    }
    next();
  }
});

如果需要退出登录,只需要将保存在store中的用户信息置空即可。

以上这篇Vue 使用beforeEach实现登录状态检查功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
vue路由切换之淡入淡出的简单实现
Oct 31 #Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 #Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 #Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 #Javascript
vue弹出框组件封装实例代码
Oct 31 #Javascript
使用zrender.js绘制体温单效果
Oct 31 #Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 #Javascript
You might like
php中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
JavaScript oncopy事件用法实例解析
2020/05/13 Javascript
vant实现购物车功能
2020/06/29 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python完全新手教程
2007/02/08 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
详解python with 上下文管理器
2020/09/02 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
大型演出策划方案
2014/05/28 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Django+Celery实现定时任务的示例
2021/06/23 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技