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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
轮播的简单实现方法
Jul 28 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
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
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
Js基础学习资料
2010/11/23 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js比较日期大小的方法
2015/05/12 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
python输出100以内的质数与合数实例代码
2018/07/08 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python 实现按对象传值
2019/12/26 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
小学网上祭英烈活动总结
2014/07/05 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
七一建党节慰问信
2015/02/14 职场文书