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

- Link: https://www.ixiqin.com/2019/02/20/vue-router-should-be-how-to-implement-the-function-of-the-default-home-page/
- Published: 2019-02-20T17:14:36+08:00
- Author: 白宦成

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

今天，终于有了答案。

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

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

具体可以参考的代码

    ```javascript
    /// 省略引用的代码
    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();
    })
    Code language: JavaScript (javascript)
    ```