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 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 Javascript
JavaScript实现栈结构详细过程
Dec 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
Javascript面向对象编程
2012/03/18 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
vue实现购物车列表
2020/06/30 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
20行python代码实现人脸识别
2019/05/05 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
自我评价优秀范文分享
2013/11/30 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书