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

赞 (0)

相关推荐

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • Vue中的验证登录状态的实现方法

    Vue项目中实现用户登录及token验证 先说一下我的实现步骤: 使用easy-mock新建登录接口,模拟用户数据 使用axios请求登录接口,匹配账号和密码 账号密码验证后, 拿到token,将token存储到sessionStorage中,并跳转到首页 前端每次跳转时,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面. 注销后,就清除sessionStorage里的token信息

  • 使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能

    路由跳转前做一些验证,比如登录验证(未登录去登录页),是网站中的普遍需求.对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router.vuejs.org/zh-cn/advanced/navigation-guards.html 先来摘抄一段文档中beforeRou

  • 使用vue-router beforEach实现判断用户登录跳转路由筛选功能

    在开发webApp的时候,考虑到用户体验,经常会把不需要调用个人数据的页面设置成游客可以访问,而当用户进入到一些需要个人数据的,例如购物车,个人中心,我的钱包等等,在进行登录的验证判断,如果判断已经登录,则显示页面,如果判断未登录,则直接跳转到登录页面提示用户登录,今天就来分享下如何使用vue-router的beforEach方法来实现这个需求. 实现 本篇文章默认您已经会使用 webpack 或者 vue-cli 来进行环境的搭建,并且具有一定的vue基础,如果您目前是一个新手,那么网上搜索一

  • Vue登录注册并保持登录状态的方法

    关于vue登录注册,并保持登录状态,是vue玩家必经之路,网上也有很多的解决方法,但是有一些太过于复杂,新手可能会看的一脸懵逼,现在给大家介绍一种我自己写项目在用而且并不难理解的一种方法. 项目中有一些路由是需要登录才可以进入的,比如首页,个人中心等等 有一些路由是不需要登录就可以进入,比如登录页,注册页,忘记密码等等 那如何判断路由是否需要登录呢?就要在路由JS里面做文章 在router.js中添加meta区分 比如登录注册页面,不需要登录即可进入,那么我们把meta中的isLogin标志设置

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

    使用VueRouter的beforeEach钩子函数,可以实现导航跳转前检查登录状态的需求. 1.在登录请求接口时返回用户的信息,比如 userInfo:{userId:'123', userName:'小明'},登录成功之后将userInfo存入store中. 2.使用beforeEach实现登录状态检查 vueRouter.beforeEach((to, from, next) => { //store的getters中定义获取用户信息的函数 getUser //userId为空说明用户未登

  • Vue注册模块与登录状态的持久化实现方法详解

    Vue注册模块与登录状态的持久化实现方法详解

    目录 整体框架 1. 前端页面授权 2. 实现注册页面 3. 实现登录状态的持久化 优化前端 整体框架 1. 前端页面授权 当我们登录网站的时候,如果没有登录,强制让用户重定向到 登录界面 在 router 目录下的 index.js 文件下实现. router -> index.js import store from '../store/index' // 把一些额外信息放到一个额外的域里面,meta信息里面存一下是否要授权,如果需要授权而且没有登录,重定向到登录页面,重定向到登录界面. c

  • 详解小程序用户登录状态检查与更新实例

    这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑

  • koa2+vue实现登陆及登录状态判断

    这里我们先说说登陆以及登陆状态控制需要的插件jsonwebtoken,jsonwebtoken就可以实现token的生成与反向解密出用户数据. 安装步骤: npm install jsonwebtoken --save 安装之后先创建一个token.js, 为了项目目录的清晰,可以创建一个token文件夹,将token.js放到里面.文件创建OK之后,该是写内容了,写内容之前先说说jsonwebtoken提供的方法: 1.sign: 生成token.2.decod: 解析token. 这两个方法

  • Vue中保存用户登录状态实例代码

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

  • Vue之beforeEach非登录不能访问的实现（代码亲测）

    后台的php请求就是接收这两个参数 login.vue <template> <div class=''> <input type="text" v-model="name" /> <input type="password" v-model="password" /> <button type="primary" @click="submit

  • jQuery基于ajax实现页面加载后检查用户登录状态的方法

    本文实例讲述了jQuery基于ajax实现页面加载后检查用户登录状态的方法.分享给大家供大家参考,具体如下: 拥有会员功能的网站,如果会员已经登录,那么要显示相应的登录状态,而且这种显示的需求是在网站的每个页面都有的(目前国内网站貌似都是这么做的,还没有见过其他形式的状态显示方式),这样,在打开一个新的页面时就要知道这个会员是否已经登录,需要判断登录的状态. 1.解决方案. 为了能够实现在每一个页面判断会员登录状态的功能,我采用了页面时通过ajax传递参数通过后端返回的登录状态结果进行判断,当然

  • vue-router beforeEach跳转路由验证用户登录状态

    使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等. 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向. 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态.也可以结合sessionStorage 和localStorage使用,原理相同. 用户登录状态验证 路由配置 定义需要判断登录状态的

  • vue.js中实现登录控制的方法示例

    本文实例讲述了vue.js中实现登录控制的方法.分享给大家供大家参考,具体如下: vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的. 首先我们需要编写登录页面和主页面: <template> <div class="login"> <table width="100%" height="100%"> &l

随机推荐