Uncaught TypeError: Cannot red propertites of undefined(reading ‘beforeEach‘)解决方案

注:这是我工作中搭建项目框架时遇到的一个小问题,分享一下解决方案

1、具体报错:页面一直是白屏,并报以下错误

 2、原因分析:

在我仔细思考后,发现是我的 router.beforeEach写在了定义router之前

3、解决方案

只需要将router.beforeEach写在定义router之后,这样就可以解决以上问题。

下面是就是怎样解决报错的代码,顺便附带一份登录权限功能的逻辑。

4、具体代码

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//引入cookie工具类
import { getToken } from '../utils/cookie'
//设置一份白名单 白名单里的路由不需要登录就能访问
var whiteArr = ['/login','/register','/adminLogin'];
// 登陆权限功能
router.beforeEach((to,from,next) => {
  // 当前路由
  var path = to.path;
  // 获取到token
  var token = getToken('token');
  if (token) { // 有token说明已经登录
    if (path == '/login') { // 如果是登录页
      next('/');  // 进入到首页
    }
    // 如果不是在登录页,发送请求拿到用户基本信息,生成菜单,制作权限 待做!!!
  } else { // 没有token说明没有登录
    if (whiteArr.includes(path)) { // 当前路由在白名单里
      next();  // 放行
    } else { // 不在白名单上
      next('/login'); // 去登录
    }
  }
  next();
})

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王昭没有君啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值