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 相关文章推荐
js滚动条多种样式,推荐
Feb 05 Javascript
xml 与javascript结合的问题解决方法
Mar 24 Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
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
一个阿拉伯数字转中文数字的函数
2006/10/09 PHP
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP防止跨域提交表单
2013/11/01 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
js charAt的使用示例
2014/02/18 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
遗传算法之Python实现代码
2017/10/10 Python
python中几种自动微分库解析
2019/08/29 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
门卫岗位安全职责
2013/12/13 职场文书
安全教育实施方案
2014/03/02 职场文书
环境整治工作方案
2014/05/18 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
高中教师个人工作总结
2015/02/10 职场文书
2015年公司工作总结
2015/04/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL