javascript - Vue router 路由的安全性

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
})

路由 /foo/bar 受到 beforeEach 钩子(Hook)和 requiresAuth 元字段的保护。但是所有这些代码都在客户端(作为缩小版本，但仍然存在)。用户可以更改代码并查看组件。
我知道我必须再次保护后端的所有 api 路由，这样用户就无法获取任何私有(private)信息。但是用户可以可能看到 protected 组件。
正如我所见，没有办法 100% 安全地向用户隐藏组件？

Answer 1

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

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

如果后端不限制，这是一个很大的安全漏洞，独立于 Vue(攻击者可以在没有 JS 客户端的情况下直接从 API 请求)。

就路由而言，您正在进行的身份验证更多是工作流/可用性问题。这是因为，一般来说，没有办法阻止更改前端代码。您可以进行缩小+丑化以使其变得更加困难，仅此而已。 (通常缩小是为了提高性能，甚至不是出于安全原因。)

看看Vue-Router/Lazy Loading Routes如果您想分块破坏您的应用:

When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.

从技术上讲，您可以保护一个 block ，使其仅供特定权限下载。不过，您应该问问自己，为实现这一目标所做的必要工作是否真的值得.