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开发技术大全-第1章javascript概述
Jul 03 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
Aug 12 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 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远程采集图片详细教程
2014/07/01 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
js 图片随机不定向浮动的实现代码
2013/07/02 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
解决uWSGI的编码问题详解
2017/03/24 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
浅析使用Python搭建http服务器
2019/10/27 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
销售主管的自我评价分享
2014/01/03 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
中学政教处工作总结
2015/08/13 职场文书
诚信高考倡议书
2019/06/24 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
python热力图实现的完整实例
2022/06/25 Python