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写的日历类(基于pj)
Dec 28 Javascript
javascript工具库代码
Mar 29 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
详解用node编写自己的cli工具
May 23 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
Less 安装及基本用法
May 05 Javascript
js实现点击选项置顶动画效果
Aug 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
解决React Native端口号修改的方法
2017/07/28 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
python计算两个地址之间的距离方法
2018/06/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python将string转换到float的实例方法
2019/07/29 Python
softmax及python实现过程解析
2019/09/30 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
赵氏孤儿观后感
2015/06/09 职场文书