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读取cookie函数代码
Oct 16 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
基于JavaScript代码实现微信扫一扫下载APP
Dec 30 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 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验证码的制作思路和实现方法
2015/11/12 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
Python set集合类型操作总结
2014/11/07 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
python二元表达式用法
2019/12/04 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python 存取npy格式数据实例
2020/07/01 Python
Python内置函数property()如何使用
2020/09/01 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
文员个人的求职信范文
2013/09/26 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
python中__slots__节约内存的具体做法
2021/07/04 Python