vue中路由验证和相应拦截的使用详解


Posted in Javascript onDecember 13, 2017

在web项目中,经常需要根据是否登录进行路由的验证和相应的拦截。

首先,在vuex里的store.js里边写一个存放登录状态,代码如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state: {
 user: false
 },
 mutations: {
 // 登录
 login (state, user) {
  state.user = user
 },
 // 退出
 logout (state, user) {
  state.user = false
 }
 }
})

路由验证:       

      路由验证用  router.beforeEach( (to, from, next) => {  } 
      这里的to代表要去的路由指向,from是指从哪个路由跳转过来的,next是判断操作,如果为空,表示放行。
      比如:下一跳的路由为‘/watchHouse'或者‘/AgentMsg' ,如果没有登录的话,通过代码 next ({path: '/login'})

跳转到登录的界面。代码如下:

if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
 next({ path: '/login' })
}

比如:在路由‘/my'下,要跳往 ‘/ToolCompute',如果没有登录的话,跳转到登录页面。代码如下:    

if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
 next({ path: '/login' })
}

全部代码:

router.beforeEach((to, from, next) => {
 if (to.path === '/login') {
 next()
 } else {
 if (!store.state.user && (to.path === '/watchHouse' || to.path === '/AgentMsg')) {
  next({ path: '/login' })
 } else {
  next()
 }
 if (!store.state.user && (from.path === '/my') && (to.path === '/ToolCompute')) {
  next({ path: '/login' })
 }
 }
})

需要注意的是,路由验证这个方法函数与vue实例的顺序还有关系。如果写在vue()的后面,下面就会执行,后判断。

如下图所示:

vue中路由验证和相应拦截的使用详解

这样写,当然是可以执行的路由跳转判断的,但是当我们直接在浏览器的地址栏里直接输入我们要跳转的

完整路由信息的时候,这个路由跳转就不会被判断了。如下图所示:

vue中路由验证和相应拦截的使用详解

如果把路由验证写到VUE实例的前面,就不会出现这样的问题了,这样就会先进行路由判断,再进行执行实例里边的内容了。

代码顺序如下所示:

vue中路由验证和相应拦截的使用详解

响应拦截:比如在根实例中通过checkLogin()这个方法去判断,登录信息 的状态,加入登录超时,则进行响应拦截,代码如下。

var app=new Vue({
 el: '#app',
 router,
 store,
 created(){
 checkLogin().then(function (res) {
  if(res.data&&res.data.code==1){
  store.commit('login',true);
  }
  else{
  router.push('/watchHouse-css');
  }
 })
 },
 template: '<App/>',
 components: { App }
})


//响应拦截器
axios.interceptors.response.use(function(res){
 //如果是未登录
 if(res.data&&res.data.code==2){
 app.$alert('登录用户已超时,请重新登录', '提示', {
  confirmButtonText: '确定',
  type:'warning',
  closeOnClickModal:false,
  callback: action => {
  router.push('/watchHouse-css')
  }
 });
 }
 return res;
},function(err){
 return Promise.reject(err);
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
javascript高亮效果的二种实现方法
Sep 14 Javascript
简明json介绍
Sep 28 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
Nov 24 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
vue-router路由懒加载和权限控制详解
Dec 13 #Javascript
JS+canvas画一个圆锥实例代码
Dec 13 #Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 #Javascript
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Vue router安装及使用方法解析
2020/12/02 Vue.js
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Python深入学习之装饰器
2014/08/31 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
python编码最佳实践之总结
2016/02/14 Python
python中lambda()的用法
2017/11/16 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python和Sublime整合过程图示
2019/12/25 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
为什么使用接口?
2014/08/13 面试题
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
村官学习十八大感想
2014/01/15 职场文书
化学教学随笔感言
2014/02/19 职场文书
招标授权委托书样本
2014/09/23 职场文书
干部作风建设心得体会
2014/10/22 职场文书
信访工作汇报材料
2014/10/27 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android