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 跨域和ajax 跨域问题小结
Jul 01 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
详解JavaScript自定义函数
Jul 29 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实现小型站点广告管理(修正版)
2006/10/09 PHP
20个PHP常用类库小结
2011/09/11 PHP
php创建多级目录的方法
2015/03/24 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
js中的面向对象入门
2017/03/06 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
ES6中的Promise代码详解
2017/10/09 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python更改已存在excel文件的方法
2018/05/03 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
求职简历中自我评价
2014/01/28 职场文书
表演方阵解说词
2014/02/08 职场文书
家长会标语
2014/06/24 职场文书
奖学金个人总结
2015/03/04 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书