vue中页面跳转拦截器的实现方法


Posted in Javascript onAugust 23, 2017

本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

登录拦截逻辑

第一步:路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由, 否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)


const routes = [
 {
 path: '/',
 name: "欢迎",
 meta: {
   requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
  },
 component: resolve => require(["../components/Hello.vue"], resolve)
 },
 {
 path: '/login',
 name: "登录",
 /*meta: {
   requireAuth: false, // 添加该字段,表示进入这个路由是需要登录的
  },*/
 component: resolve => require(["../view/login/login.vue"], resolve)
 }
]


export default new Router({
 base: "/",
 routes
})

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。

所以在main.js加上

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
  if (store.state.token) { // 通过vuex state获取当前的token是否存在
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
})

每个钩子方法接收三个参数:

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

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

     * next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

     * next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。

     * next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。

     * next(‘/') 或者 next({ path: ‘/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

确保要调用 next 方法,否则钩子就不会被 resolved。

其中,to.meta中是我们自定义的数据,其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话,同时当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。

完成后,我们可以在登录页面。控制用户登录成功后,vuex的token状态改变就可以了

<script>
export default {
 methods:{
 login(){
  this.$store.commit('setToken','true');  //改变token状态
  let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 获取登录成功后要跳转的路由。
  this.$router.push({
  path: redirect
  })
 }
 }
}
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
在vue中实现echarts随窗体变化
Jul 27 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 #jQuery
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 #Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 #Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 #jQuery
浅谈vue-lazyload实现的详细过程
Aug 22 #Javascript
关于定制FileField中的上传文件名称问题
Aug 22 #Javascript
React复制到剪贴板的示例代码
Aug 22 #Javascript
You might like
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php-fpm配置详解
2014/02/12 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jQuery 性能优化指南 (1)
2009/05/21 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
python实现马耳可夫链算法实例分析
2015/05/20 Python
python抓取文件夹的所有文件
2018/02/27 Python
详解Python中的正则表达式
2018/07/08 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python生成大写32位uuid代码
2020/03/03 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
.NET常见笔试题集
2012/12/01 面试题
总经理助理职责
2014/02/04 职场文书
民事赔偿协议书
2014/11/02 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
Node.js实现断点续传
2021/06/23 Javascript