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 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
犀利的js 函数集合
Jun 11 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
基于node实现websocket协议
Apr 25 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
小程序自定义日历效果
Dec 29 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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数据加密详解
2013/06/18 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
python复制文件到指定目录的实例
2018/04/27 Python
python requests 测试代理ip是否生效
2018/07/25 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
商场租赁意向书
2014/07/30 职场文书
高中美术教学反思
2016/02/17 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android