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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
详解JavaScript中的属性和特性
Dec 08 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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自动生成月历代码
2006/10/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jQuery调用WebService的实现代码
2011/06/19 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python调用摄像头显示图像的实例
2018/08/03 Python
Django 框架模型操作入门教程
2019/11/05 Python
Pytorch之parameters的使用
2019/12/31 Python
django列表筛选功能的实现代码
2020/03/27 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
学习交流会主持词
2014/04/01 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
小浪底导游词
2015/02/12 职场文书
社区义诊通知
2015/04/24 职场文书
公司财务管理制度
2015/08/04 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python