在 vuejs 中保护子路由

Question

我试图保护子路线免受父路线的影响，但这失败了

    export default new Router({
    routes: [
    //frontend routes
    {
      {path: 'auth', component: Auth, children: authroutes,
        beforeEnter: (to, from, next) => {
        // check if user is a guest or loggedin
        auth.canAccess(permissions.is_guest)
          .then((res) => {
            if (res.data.status) {
              next();
            } else {
              router.push('/auth/not-allowed');
            }
          })
       }}
      ]
     }
   ]
 })

现在在我的孩子路线上

authroutes.js

const authroutes = [
  {path: '', redirect: 'login'},
  {path: 'login', component: Login, name: "login" },
];

但是，当我将上面的 beforeenter 放在子路由上时，它可以工作，但会导致大量代码重复。

我如何保护孩子免受父母路线的影响

例如：守卫/auth/login 和/auth/register

Answer 1

只需将路由的元字段用于您想要保护的字段，如下所示：

const authroutes = [
    {path: '', redirect: 'login', meta: {requiresAuth: true}},
    {path: 'login', component: Login, name: "login" , meta: {requiresAuth: true}},,
];

然后配置您的路由器以检查路由是否具有指定的元字段并执行重定向逻辑

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
        auth.canAccess(permissions.is_guest)
              .then((res) => {
                if (res.data.status) {
                      next();
                } else {
                     next('/auth/not-allowed');
                }
              })
    }else { 
        next() // make sure to always call next()! 
    } 
});

在此处查看更多信息： 路由元字段