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 相关文章推荐
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
javascript中闭包closure的深入讲解
Mar 03 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
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
Smarty变量用法详解
2016/05/11 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
vue实现循环切换动画
2018/10/17 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python 系统调用的实例详解
2017/07/11 Python
python实现矩阵打印
2019/03/02 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
浅析matlab中imadjust函数
2020/02/27 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
25道Java面试题集合
2013/05/21 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
20岁生日感言
2014/01/13 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
婚前协议书标准版
2014/10/19 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2019年员工晋升管理制度范本!
2019/07/08 职场文书