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 相关文章推荐
javascript 原型链维护和继承详解
Nov 26 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
浅谈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+mysql分页代码详解
2008/03/27 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python 性能提升的几种方法
2016/07/15 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python如何使用input函数获取输入
2020/08/06 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
Final类有什么特点
2012/04/25 面试题
竞选班长演讲稿
2013/12/30 职场文书
入党思想汇报
2014/01/05 职场文书
问卷调查计划书
2014/01/10 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
十一酒店活动方案
2014/02/20 职场文书
标准单位租车协议书
2014/09/23 职场文书
技术负责人岗位职责
2015/02/10 职场文书
土建施工员岗位职责
2015/04/11 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android