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

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

Answer 1

如果用户更改了前端代码，则该组件将是可见的，是的。

但数据会填充该组件应该无法看到由于后端限制访问这些数据。

如果后端没有对其进行限制，那么这将是一个很大的安全漏洞，而与Vue无关（攻击者可以在没有JS客户端的情况下直接向API请求）。

至于路由，您正在执行的身份验证更多地涉及工作流/可用性。这是因为，一般而言，没有办法防止更改前端代码。您可以进行缩小+丑化以使其更加困难，但是仅此而已。（通常出于安全起见，缩小是为了提高性能。）

如果您想将应用程序分成多个块，请查看Vue-Router /延迟加载路径：

使用捆绑程序构建应用程序时，JavaScript捆绑程序可能会变得很大，从而影响页面加载时间。如果我们可以将每个路由的组件拆分为单独的块，并且仅在访问该路由时才加载它们，则效率会更高。

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