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中各种编码解码函数的区别和注意事项
Aug 19 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
Dec 26 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
vue实现商城购物车功能
Nov 27 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
一个简单实现多条件查询的例子
2006/10/09 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP简单日历实现方法
2016/07/20 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
php实现session共享的实例方法
2019/09/19 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
总裁岗位职责
2013/12/04 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
环保口号大全
2014/06/12 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
任长霞观后感
2015/06/16 职场文书
八年级作文之感恩
2019/11/22 职场文书