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常见注意事项
Jan 01 Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 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/11/16 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
jQuery表格行上移下移和置顶的实现方法
2015/10/08 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
canvas绘制图片drawImage使用方法
2020/09/15 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
小学科学教学反思
2014/01/26 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
信息管理与信息系统专业求职信
2014/06/21 职场文书
平面设计师岗位职责
2014/09/18 职场文书
财务工作失误检讨书
2015/02/19 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技