Vue Router 应该如何实现限制用户登陆的功能?

在 Vue Router 中,并没有一个所谓的默认首页的功能,所以我一直都很好奇,应该如何实现这样的功能?如果没有这样的功能,又如何实现一个项目的默认显示页面呢?

今天,终于有了答案。

这样的功能不是内置的,不过你可以通过 router.beforeEach来实现这个功能。

具体的思路是,在跳转前,对目标路由进行检测,如果目标路由的 meta 信息中写明了需要进行鉴权,就跳转到默认的登陆页面。这样,就可以实现默认显示登陆页面的功能。

具体可以参考的代码

/// 省略引用的代码
let router = new Router({
  mode:"history",
  base:base,
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { title: '登陆' }
    },
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { title: '首页', requireLogin:true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  const { name,meta } = to;
  const { requireLogin } = meta; // 提取登陆 标志

  if(name === 'login'){
    return next();
  }
  const needLogin = requireLogin;

  if(needLogin){ // 如果判断需要登陆,就跳转登陆。
    return next({
      name:"login",
      params:{
        back: to
      }
    })
  }
  next();
})

发表评论