vue限制实现不登录无法进入其他页面

 更新时间:2024年01月05日 09:18:18   作者:小跳不会Coding  
本文主要介绍了vue限制实现不登录无法进入其他页面,vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面,感兴趣的可以了解一下

vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面

参数说明:

  • to: Route: 即将要进入的目标(路由对象)
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

1.先在router下的index.js添加 meta:{requireAuth:true},如下:

{
  path: '/data',
  name: 'data',
  component: data,
  meta:{requireAuth:true}
},

2.然后在main.js添加如下代码:

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(localStorage.getItem('userInfo')){ //判断本地是否存在access_token
      next();
    }else {
     if(to.path === '/login'){
        next();
      }else {
        alert('请先进行登录!')
        next({
          path:'/login'
        })
      }
    }
  }
  else {
    next();
  }
  /*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
  if(to.fullPath == "/login"){
    if(localStorage.getItem('userInfo')){
      alert('您已经登录了,如果想要登录其他账号,请先退出当前账号!')
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }
});

或者是:

router.beforeEach((to, from, next)=> {
 let userInfo = localStorage.getItem('userInfo')
 let list = ['login','checking','register','phoneLogi','chat','GroupSharing','new_file','videoChat',]//多个路由
 if (userInfo || list.indexOf(to.name) !== -1) {
   next()
 }
 else {
   next({
     name:'login'
   })
 }
  // next()
})

到此这篇关于vue限制实现不登录无法进入其他页面的文章就介绍到这了,更多相关vue限制登录内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • vue.js 2.0实现简单分页效果

    vue.js 2.0实现简单分页效果

    这篇文章主要为大家详细介绍了vue.js 2.0实现简单分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vuejs从数组中删除元素的示例代码

    Vuejs从数组中删除元素的示例代码

    这篇文章主要介绍了Vuejs从数组中删除元素的示例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue.js实现可编辑的表格

    Vue.js实现可编辑的表格

    这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 在Vue2中v-model和.sync区别解析

    在Vue2中v-model和.sync区别解析

    在vue2中提供了.sync修饰符,但是在vue3中不再支持.sync,取而代之的是v-model,本文给大家介绍在Vue2中v-model和.sync区别,感兴趣的朋友一起看看吧
    2023-10-10
  • 详解vue 项目白屏解决方案

    详解vue 项目白屏解决方案

    这篇文章主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • vue3自定义确认密码匹配验证规则的操作代码

    vue3自定义确认密码匹配验证规则的操作代码

    这篇文章主要介绍了vue3自定义确认密码匹配验证规则的操作代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue3如何使用Vue-Router进行路由控制

    Vue3如何使用Vue-Router进行路由控制

    无论是小型项目还是中大型项目,Vue-Router都是必选的一个组件,Vue-Router提供了便捷的方式进行路由跳转,在使用过程中有一些坑,希望能给在编码找不到问题时的码农提供一点灵感
    2022-06-06
  • vue iview组件表格 render函数的使用方法详解

    vue iview组件表格 render函数的使用方法详解

    下面小编就为大家分享一篇vue iview组件表格 render函数的使用方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue.js做一个简单的编辑菜谱功能

    vue.js做一个简单的编辑菜谱功能

    本文通过实例代码给大家一个简单的基于vue.js实现的编辑菜谱功能,代码简答易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-05-05
  • vue.js el-table动态单元格列合并方式

    vue.js el-table动态单元格列合并方式

    这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02

最新评论