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 相关文章推荐
js点击选择文本的方法
Feb 09 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
jQuery动态添加
Apr 07 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
浅谈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解答方法
2012/02/04 PHP
php中使用GD库做验证码
2016/03/31 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
javascript常见用法总结
2014/05/22 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python解析树及树的遍历
2016/02/03 Python
pip命令无法使用的解决方法
2018/06/12 Python
python日志logging模块使用方法分析
2019/05/23 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
python输入中文的实例方法
2020/09/14 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
舞蹈专业求职信
2014/06/13 职场文书
检讨书格式
2015/05/07 职场文书
红色影片观后感
2015/06/18 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
教你怎么用Python监控愉客行车程
2021/04/29 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python