vue-router判断页面未登录自动跳转到登录页的方法示例


Posted in Javascript onNovember 04, 2018

1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录

下面的两个页面,登录页不需要检测,首页需要检测

const routers = [
{
   path: '/',
   component: App,
 children: [

  { 


path: '/login', 

  component: Login,
   meta: {
    title: '登录'

   }

 },

 { 


path: '/home', 

  component: Home,
   meta: {
    title: '首页',
    requireAuth: true
   }

 }

]
}
]
export default routers

2.main.js

返回遍历的某个路由对象,我们定义为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测meta对象是不是有requireAuth这个属性且为true

检测到需要登录权限后,我的做法是请求接口判断用户是否登录

如果未登录,跳转到登录页面;如果已经登录,确保要调用next()方法,否则钩子就不会被resolved

router.beforeEach((to, from, next) => {
 /* 页面title */
 if (to.meta.title) {
  document.title = to.meta.title
 }
 /* 判断该路由是否需要登录权限 */
 if (to.matched.some(record => record.meta.requireAuth)) {
  //是否登录
  axios.post('/home/user/isLogin')
    .then(function (response) {
      if (response.data.code == 0) {
        //未登录
        if (response.data.data.online == 0) {
          next({
            path: '/login',
          })
        } else {
          //已登录
          next()
        }
      }
    })
    .catch(function (error) {
      // Toast(error.data.msg);
    });

 }
 next();
})

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

Javascript 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
Feb 20 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
浅谈React碰到v-if
Nov 04 #Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 #Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 #Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 #Javascript
微信小程序实现笑脸评分功能
Nov 03 #Javascript
小程序实现五星点评效果
Nov 03 #Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
You might like
php curl常用的5个经典例子
2017/01/20 PHP
javascript编程起步(第七课)
2007/01/10 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
2016/09/29 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
python字符串替换的2种方法
2014/11/30 Python
python查看FTP是否能连接成功的方法
2015/07/30 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python如何求100以内的素数
2020/05/27 Python
Python中的全局变量如何理解
2020/06/04 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
党员承诺书怎么写
2014/05/20 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
五年级作文之想象作文
2019/10/30 职场文书
如何用python插入独创性声明
2021/03/31 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
mysql的数据压缩性能对比详情
2021/11/07 MySQL
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
vue中data里面的数据相互使用方式
2022/06/05 Vue.js