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()
})
相关推荐
Dxy123931021611 小时前
JS DES 加密详解
开发语言·javascript·arcgis
充值内卷11 小时前
我给桌面加了个鱼缸:C++ 写后端,WebView2 里养一座 Three.js 小岛
开发语言·javascript·c++
椒哥14 小时前
一天被问几十次"允许",我统计了 517 次,然后写了个插件
前端·javascript·github
kyriewen14 小时前
我测了 6 种防请求竞态的写法:只有 1 种真能打
前端·javascript·程序员
OpsEye15 小时前
企业大模型压测,需要重点关注哪些指标?
javascript·ai编程
LuHang15 小时前
从天地图切换到高德地图:一次真实的底图迁移实战
前端·vue.js·cesium
像我这样帅的人丶你还16 小时前
我html生成的doc文档为何在手机文档显示不了图片?
前端·javascript
ruanno_top19 小时前
Vue 3 后台权限路由:我漏掉了按钮级裁剪,还把 403 写成了 404
vue.js
栉甜19 小时前
Vue2学习内容(上)
前端·javascript·vue.js·学习
shmily麻瓜小菜鸡21 小时前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript