隐藏 Vue 路由答案

【问题标题】：hiding the vue routes隐藏 Vue 路由
【发布时间】：2019-04-02 06:37:09
【问题描述】：

我的 vue 路线为

const ifAuthenticated = (to, from, next) => {
  if (store.getters.isAuthenticated) {
    next()
    return
  }
  next('/login')
}

const checkAgentPermissions = () => {
  return false
}

export const routes = [
 {
  path: '/users',
    beforeEnter: ifAuthenticated,
    component: Layout,
    meta: { title: 'Agent Onboarding', icon: 'address-card' },
    hidden: checkAgentPermissions,
    children: [
      {
        path: '',
        name: 'Users',
        component: () => import('@/views/users/index.vue')
      },
      {
        .....some more childrens
      }
    ]
 }
]

但是当通过函数调用时，隐藏总是正确的。如果我将 checkAgentPermissions 中隐藏的选项更改为 false

 hidden: false // works perfectly

为什么函数不返回 false，实际上我需要在 fn 中做一些检查，然后根据它返回 true/false。

对于每个路由，我通过检查 hidden 是否为真/假来在 vue 组件中呈现它们。

【问题讨论】：

标签： vue.js vue-router privacy

【解决方案1】：

尝试执行你的隐藏函数：

hidden: checkAgentPermissions(),
children: [
...

【讨论】：

它有效，但你能告诉我为什么 ifAuthenticated 不需要这些括号吗？
因为beforeEnter是一个hook方法，所以ifAuthenticated在触发的时候会被执行。