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

 更新时间:2019年10月31日 14:43:24   转载 作者:北海之灵  
今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

使用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实现登录状态检查功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue 组件开发原理与实现方法详解

    vue 组件开发原理与实现方法详解

    这篇文章主要介绍了vue 组件开发原理与实现方法,结合实例形式详细分析了vue.js组件开发的原理与实现方法,需要的朋友可以参考下
    2019-11-11
  • vue-cli项目优化方法- 缩短首屏加载时间

    vue-cli项目优化方法- 缩短首屏加载时间

    这篇文章主要介绍了vue-cli项目优化 缩短首屏加载时间,需要的朋友可以参考下
    2018-04-04
  • 浅谈vue 单文件探索

    浅谈vue 单文件探索

    这篇文章主要介绍了浅谈vue 单文件探索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用Nuxt.js改造已有项目的方法

    使用Nuxt.js改造已有项目的方法

    这篇文章主要介绍了使用Nuxt.js改造已有项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue使用微信JS-SDK实现分享功能

    vue使用微信JS-SDK实现分享功能

    这篇文章主要介绍了vue使用微信JS-SDK实现分享功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue.js实现的计算器功能完整示例

    Vue.js实现的计算器功能完整示例

    这篇文章主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
    2018-07-07
  • vue使用Proxy实现双向绑定的方法示例

    vue使用Proxy实现双向绑定的方法示例

    这篇文章主要介绍了vue使用Proxy实现双向绑定的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue 3.0 前瞻Vue Function API新特性体验

    Vue 3.0 前瞻Vue Function API新特性体验

    这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue-router动态设置页面title的实例讲解

    vue-router动态设置页面title的实例讲解

    今天小编就为大家分享一篇vue-router动态设置页面title的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    这篇文章主要为大家详细介绍了Vue编写可显示周和月模式的日历,Vue自定义日历内容的显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-06-06

最新评论