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()
})
相关推荐
胡gh17 分钟前
一篇文章,带你搞懂大厂如何考察你对Array的理解
javascript·后端·面试
胡gh27 分钟前
this 与 bind:JavaScript 中的“归属感”难题
javascript·设计模式·程序员
OEC小胖胖43 分钟前
前端性能优化“核武器”:新一代图片格式(AVIF/WebP)与自动化优化流程实战
前端·javascript·性能优化·自动化·web
爬点儿啥1 小时前
[JS逆向] 微信小程序逆向工程实战
开发语言·javascript·爬虫·微信小程序·逆向
pe7er1 小时前
websocket、sse前端本地mock联调利器
前端·javascript·后端
OEC小胖胖2 小时前
告别项目混乱:基于 pnpm + Turborepo 的现代化 Monorepo 工程化最佳实践
前端·javascript·前端框架·web
Mintopia2 小时前
🌌 探索虚空中的结构:光线步进与 Marching Cubes 的奇幻冒险
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 光照系统进阶指南 —— 打造光明的舞台
前端·javascript·three.js
天天打码2 小时前
Esbuild-新一代极速前端构建打包工具
前端·javascript·前端框架
爱分享的程序员3 小时前
前端面试专栏-工程化:26.性能优化方案(加载优化、渲染优化)
前端·javascript·node.js