Vue登录拦截 登录后继续跳转指定页面的操作
作者:努力的小懒 发布时间:2024-05-28 15:48:14
标签:Vue,登录,拦截,跳转,页面
在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?
1、在路由器router下的 index.js 的配置中,给需要拦截登录的页面的路由上加一个meta: {loginRequest: true} ,其中loginRequest 变量自己可以随意定义
2、在main.js文件里面添加beforeEach钩子函数
解释:
router.beforeEach((to, from, next) => {} 三个参数:
to:即将要进入的目标 路由对象
from:当前导航正要离开的路由
next:(function函数) 调用next() 进行管道中的下一个钩子
next() 无参 进行 下一个钩子函数
next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面
3、登录页面login.vue,登录完成后,跳到指定页面或首页
补充知识:vue实现登录后跳转到来源路由url
sessionStorage存储from.path来源的路由url,如果不是登录或者注册就拦截跳到登录页,如果是就放行
router.beforeEach(function(to,from,next){
if(to.path!='/login' && to.path!='/register'){
sessionStorage.setItem('referrer',from.path) //储存来源路由
alert('请登录')
next({
path:'/login'
})
}else{
next()
}
})
登录后判断sessionStorage中是否有存储来源路由,如果有就跳转到这个路由
//获取来源页路由
var referrer = sessionStorage.getItem('referrer');
if(referrer != null){
this.$router.push(referrer)
}else {
this.$router.push('/home')
}
来源:https://blog.csdn.net/qq_34576876/article/details/94356585


猜你喜欢
- JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),a
- QMainWindowQMainWindow类中比较重要的方法方法描述addToolBar()添加工具栏centralWidge()返回窗口
- 1.场景描述我们公司是做电商的,运营的工作指标都是按周来定的,所以他们对周特别敏感,希望我们能在日期选择器上显示周数。刚接到这个需求时,心中
- list*n生成多维数组与for循环生成多维数组的区别本文主要介绍生成二维数组的方法,同时解释使用list * n 方式所存在的问题。1.从
- PHP从主流来看,是一门面向过程的语言,它的最大缺点就是无法实现多线程管理,其程序的执行都是从头到尾,按照逻辑一路执行下来,不可能出现分支,
- 在GUI程序中,主线程也叫GUI线程,因为它是唯一被允许执行GUI相关操作的线程。对于一些耗时的操作,如果放在主线程中,就是出现界面无法响应
- 二维离散傅里叶变换(DFT)对于二维图像处理,通常使用 x , y x, yx,y 表示离散的空间域坐标变量,用 u , v u,vu,v
- 可以通过遍历的方法:pandas按行按列遍历Dataframe的几种方式:https://www.jb51.net/article/1726
- 实例代码:import tkinter as tk import tkinter.filedialogimport cv2def choos
- 在windows下的解决办法如下: 1.net stop mysql 停用服务 &
- 本文分享下自己平时积累的一些实用性较高的js方法,供大家指点和评价。本想分篇介绍,发现有点画蛇添足。整理了下也没多少拿得出手的方法,自然有一
- 1.交换变量值2.将一列表中的所有元素拼接成字符串3.查找list中最高频率的值4.检查两个单词是否是字谜(组成的字母和对应数量一致)5.反
- 今天安装Django的时候遇到了python版本冲突,找不到python路径,所以又重新安装了一个python3.6.5安装完之后,突然发现
- 有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫
- python在进行字符串的拼接时,一般有两种方法,一种是使用+直接相加,另一种是使用joina = "tests"b =
- 最近,我有机会研究对视觉设计作用的常见误解,这些误解仍然盛行于行政主管、产品主管,工程经理和市场专家中。设计团队成员如何说明这些认识是错误的
- 两段使用键盘的上下键进行选择的代码:<Script Language="JScript"> &
- <html><head><title>过滤空格</title><SCRIPT LANG
- 本文实例讲述了python实现连接mongodb的方法。分享给大家供大家参考。具体分析如下:通过pymongo可以很容易的链接到mongod
- .whl文件解释whl文件时以wheel格式保存的python安装包,Wheel是Python发行版的标准内置包格式。WHL文件包含Pyth