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

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

参数说明:

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

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

js 复制代码
{
  path: '/data',
  name: 'data',
  component: data,
  meta:{requireAuth:true}
},

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

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();
    }
  }
});

或者是:

js 复制代码
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()
})
相关推荐
Hi_kenyon11 小时前
VUE3套用组件库快速开发(以Element Plus为例)二
开发语言·前端·javascript·vue.js
Irene199111 小时前
Vue 3 响应式系统类型关系总结(附:computed、props)
vue.js·props·响应式类型
起名时在学Aiifox11 小时前
Vue 3 响应式缓存策略:从页面状态追踪到智能数据管理
前端·vue.js·缓存
天若有情67311 小时前
校园二手交易系统实战开发全记录(vue+SpringBoot+MySQL)
vue.js·spring boot·mysql
计算机程序设计小李同学11 小时前
个人数据管理系统
java·vue.js·spring boot·后端·web安全
EndingCoder12 小时前
Any、Unknown 和 Void:特殊类型的用法
前端·javascript·typescript
JosieBook12 小时前
【Vue】09 Vue技术——JavaScript 数据代理的实现与应用
前端·javascript·vue.js
Eason_Lou12 小时前
webstorm开发vue项目快捷跳转到vue文件
ide·vue.js·webstorm
起名时在学Aiifox13 小时前
前端文件下载功能深度解析:从基础实现到企业级方案
前端·vue.js·typescript
云上凯歌14 小时前
01 ruoyi-vue-pro框架架构剖析
前端·vue.js·架构