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客户端）。

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

如果您希望以块的形式破坏您的应用，请查看Vue-Router/Lazy Loading Routes：

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

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

Vue路由器的路由安全性

1 个答案: