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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
JS实现动态给标签控件添加事件的方法示例
May 13 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
js实现日历
Nov 07 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上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python实现批量文件重命名
2019/10/31 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
python中怎么表示空值
2020/06/19 Python
如何通过命令行进入python
2020/07/06 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
公司市场部岗位职责
2013/12/02 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
525心理活动总结
2014/07/04 职场文书
客房部经理岗位职责
2015/02/02 职场文书
义诊活动通知
2015/04/24 职场文书
机器人总动员观后感
2015/06/09 职场文书