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

2025-08-15 00:54:48

使用vue判断验证用户登录状态

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

用户登录状态验证

路由配置

定义需要判断登录状态的meta 属性auth

const routes =[
  {
    path:'/',
    component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Filtrate'
  },//首页
  {
    path:'/Home',
    component: resolve => require(['../components/mainTem/Home.vue'],resolve),
    meta:{auth:true,keepAlive: true },
    name:'Home'
  },//登录
  {
    path:'/Login',
    component: resolve => require(['../components/mainTem/Login.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Login'
  },//最新案例
  {
    path:'/NewCase',
    component: resolve => require(['../components/mainTem/NewCase.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'NewCase'
  },//推荐
  {
    path:'/Recommend',
    component: resolve => require(['../components/mainTem/Recommend.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'Recommend'
  },//个人中心
  {
    path:'/User',
    component: resolve => require(['../components/mainTem/User.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'User'
  },//筛选
  {
    path:'/Filtrate',
    component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Filtrate'
  },
  {//详情
    path:'/Detail',
    component: resolve => require(['../components/mainTem/Detail.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Detail'
  }
]

监听

我用的是localStorage储存的用户token值。

业务逻辑：用户没有localStorage说明是第一次登录，则直接跳到登录页面，在登录页面储存token值，存在localStorage，用户关闭页面后，在24小时内，再次打开页面直接进入主页面，通过localStorage去判断当前token是否有效，如果已失效，则提示登录已超时，重新跳到登录页面。

meta
只有在路由中设置了meta auto属性为true的才判断，以上路由全部由设置

to
to为向后走的路由对象，包括路由的完整信息

from
from为从哪跳来的路由对象

next()
next()控制路由向下走，重新定义路由跳转的路由next(‘路由路径)

/** 验证用户是否登录 **/
router.beforeEach((to,from,next) => {
  if(to.matched.some( m => m.meta.auth)) {
    // console.log("先判断是否登录");
    if(to.name=='Login'){
      next();
    }else{
     if(localStorage.getItem('token')){

     //访问服务器缓存数据，判断当前token是否失效
      Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
          // console.log('是否登录',num);
          if(num.code==1001){
            next();
          }else{
            alert('您的token已超时，请重新登录');
            next('/Login');
          }
      })
     }else{
      next('/Login');
     }

    }
 　} else {
    console.log("请先登录");
    next()
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue-router判断页面未登录自动跳转到登录页的方法示例

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录下面的两个页面,登录页不需要检测,首页需要检测 const routers = [ { path: '/', component: App, children: [ { path: '/login', component: Login, meta: { title: '登录' } }, { path: '/home', component: Home, meta: { title: '首页', re
使用vue-router beforEach实现判断用户登录跳转路由筛选功能

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

前言使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D
vue-router跳转页面的方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p>  <
Vue-Router来实现组件间跳转的三种方法

通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下提供了3种方式实现跳转: ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script>  &
VueJs路由跳转——vue-router的使用详解

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> p
Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
vue-router跳转时打开新页面的两种方法

最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持
vue-router beforeEach跳转路由验证用户登录状态

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

最近在学习ssh框架时,照着网上做了一个商城系统,之前在一些需要用户存在的操作中,都是在每一个action中写重复的代码,这样做现在想起来并不好,想起了spring的aop,于是想通过aop来给每个需要用户操作的Action验证用户登录状态. 想法是这样的: 1. 用户登录时把userId放入session中 2. 通过spring 写一个advice来获取session中的userId,判断用户登录状态,如果userId不符合,则抛出自定义异常 3. 通过struts中配置来捕获异常,跳转界面
Go WEB框架使用拦截器验证用户登录状态实现

目录 wego拦截器 main函数登录逻辑登录拦截器的实现 index页面的实现 wego拦截器 wego拦截器是一个action(处理器函数)之前或之后被调用的函数,通常用于处理一些公共逻辑.拦截器能够用于以下常见问题: 请求日志记录错误处理身份验证处理 wego中有以下拦截器: before_exec :执行action之前拦截器 after_exec :执行action之后拦截器本文用一个例子来说明如何使用拦截器来实现用户登录状态的判定.在这个例子中,用户访问login_get来
Vue项目如何保持用户登录状态(localStorage+vuex刷新页面后状态依然保持)

目录前言一.实现效果二.实现步骤及涉及要点三.涉及代码总结前言在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态. 这里小马演示使用的是 localStorage + vuex 方法(其他诸如 sessionStorage.cookie 等用法相同,只是功能有所区别). 一.实现效果实现功能:用户登录成功后,刷新浏览器页面或者关闭浏览器再次打开网页后,登录状态依然保持,直到用户点击登
Vue保持用户登录状态(各种token存储方式)

目录怎么设置Cookie Cookie的缺点: LocalStorage与SessionStorage存储Token LocalStorage与SessionStorage的主要区别: Vuex存储Token 为什么要使用Vuex 在前端中,实现保持用户登录状态的方法有很多种,你通过可以存Cookie.Session.Token等信息来保持,不管后台向前端发送哪个我们要做的就是将这些信息存在在本地浏览器中,浏览器再次发送请求时,将设置了'键'='值'的Cookie再次抛给服务器,服务器通过Co
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)

本文实例讲述了AngularJS实现用户登录状态判断的方法.分享给大家供大家参考,具体如下: 使用AngularJS的单页面应用时,由于是本地路由在控制页面跳转,但是有的时候我们需要判断用户是否登录来判断用户是否能进入界面. angularjs是mvc架构所以实现起来很容易也很灵活,我们只MainController里增加一个路由事件侦听并判断,这样就可以避免未登录用户直接输入路由地址来跳转到登录界面地址了代码中的 $rootScope.user是登录后把用户信息放到了全局rootScope上
PHP+Ajax验证码验证用户登录

用AJAX 验证用户登录的一个好处是不刷新跳转页面,外加用到验证码就更安全了,摸索的写了下.一共用到三个文件: yz.php: 生成验证码的PHP 文件,将验证码将在SESSION 里,供登录时对比调用 index.php: 用户登录的HTML 文件 loginCheck.php: 验证用户登录的文件下面一一解析: yz.php 文件 <?php session_start(); //生成验证码图 Header("Content-type: image/PNG"); //长与
使用AJAX（包含正则表达式）验证用户登录的步骤

我们来分一下步骤吧: 1.HTML代码,页面先写出来: 2.正则表达式验证输入的用户名密码是否正确,失去焦点验证 3.Ajax异步提交 4.servlet这是后台处理代码获取数据并对比响应,然后跳转成功页面效果图: 结构: 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "
.net MVC使用Session验证用户登录（4）

用最简单的Session方式记录用户登录状态 1.添加DefaultController控制器,重写OnActionExecuting方法,每次访问控制器前触发 public class DefaultController : Controller { protected override void OnActionExecuting(ActionExecutingContext filterContext) { base.OnActionExecuting(filterContext); va
Django Session和Cookie分别实现记住用户登录状态操作

简介由于http协议的请求是无状态的.故为了让用户在浏览器中再次访问该服务端时,他的登录状态能够保留(也可翻译为该用户访问这个服务端其他网页时不需再重复进行用户认证).我们可以采用Cookie或Session这两种方式来让浏览器记住用户. Cookie与Session说明与实现 Cookie 说明 Cookie是一段小信息(数据格式一般是类似key-value的键值对),由服务器生成,并发送给浏览器让浏览器保存(保存时间由服务端定夺).当浏览器下次访问该服务端时,会将它保存的Cookie再发给

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

相关推荐

随机推荐