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总体架构的理解分析
Mar 07 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
javaScript基础详解
Jan 19 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
微信小程序实现换肤功能
Mar 14 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
ADODB类使用
2006/11/25 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
一篇.NET面试题
2014/09/29 面试题
总经理助理的八要求
2013/11/12 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
入职担保书怎么写
2014/05/12 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
党风廉政建设心得体会
2019/05/21 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
pandas 实现将NaN转换为None
2021/05/14 Python
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript