Vue路由器的安全性

Question

我现在正在学习Vue 2个星期，我找不到关于路由安全性这个问题的答案。

当我在Vue中使用元字段和路由保护来保护路由时，我想知道客户端可以做什么来查看组件。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})



router.beforeEach((to, from, next) => {
  // check if authenticated by jwt from store or localstorage
})

route /foo/bar受beforeEach挂钩和requiresAuth元字段的保护。 但所有这些代码都在客户端（作为缩小版本，但仍然存在）。 用户可以更改代码并查看组件。
我知道我必须再次保护后端的所有api路由，以便用户无法获取任何私人信息。 但是用户可能会看到受保护的组件。
我认为没有办法隐藏用户100％安全的组件？

Answer 1

如果用户改变前端代码，那么组件将是可见的，是的。

但是，这将填充该组件的数据 不应该是可见的 ，由于后端限制访问这些数据。

如果后端不限制它，那么它就是一个很大的安全漏洞，与Vue无关（攻击者可以在没有JS客户端的情况下直接从API请求）。

就路由而言，您正在进行的身份验证更多的是工作流/可用性问题。 这是因为，一般来说，没有办法阻止改变前端代码。 你可以做缩小+丑化使其更难，但就是这样。 （通常缩小是为了提高性能，即使出于安全原因也是如此。）

如果你想以块的形式打破你的应用程序，请查看Vue-Router / Lazy Loading Routes ：

使用bundler构建应用程序时，JavaScript包可能会变得非常大，从而影响页面加载时间。 如果我们可以将每个路由的组件拆分成一个单独的块，并且只在访问路径时加载它们，那么效率会更高。

从技术上讲，您可以保护一个块，让它只能下载到特定权限。 但是，您应该问问自己，实现这一目标所需的工作是否真的值得。