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
0
投稿猜你喜欢
- 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
