Vue登录拦截 登录后继续跳转指定页面的操作


Posted in Javascript onAugust 04, 2020

在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢?

1、在路由器router下的 index.js 的配置中,给需要拦截登录的页面的路由上加一个meta: {loginRequest: true} ,其中loginRequest 变量自己可以随意定义

Vue登录拦截 登录后继续跳转指定页面的操作

2、在main.js文件里面添加beforeEach钩子函数

Vue登录拦截 登录后继续跳转指定页面的操作

解释:

router.beforeEach((to, from, next) => { } 三个参数:

to:即将要进入的目标 路由对象

from:当前导航正要离开的路由

next:(function函数) 调用next() 进行管道中的下一个钩子

next() 无参 进行 下一个钩子函数

next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面

3、登录页面login.vue,登录完成后,跳到指定页面或首页

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')
}

以上这篇Vue登录拦截 登录后继续跳转指定页面的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
详解Vue 单文件组件的三种写法
Feb 19 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 #Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 #Javascript
解决vuecli3中img src 的引入问题
Aug 04 #Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 #Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 #Javascript
You might like
PHP MSSQL 存储过程的方法
2008/12/24 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
vue实现微信分享功能
2018/11/28 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
十一个高级MySql面试题
2014/10/06 面试题
师德师风建设整改措施思想汇报
2014/10/11 职场文书
学习与创新自我评价
2015/03/09 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android