Question

我正在尝试测试我的Vue.js应用身份验证。

假设，一个用户登录并进入他的个人资料，链接将如下所示。 https://website.com/profile/1

他可以进入他的页面，但是如果他是一名黑客并且尝试输入该怎么办

https://website.com/profile/2

这将转到另一个人的个人资料。

如果该黑客试图转到不属于其个人资料的URL，该如何将其重定向到登录页面？

现在，我可以阻止他查看其他人的个人资料，但是即使他输入了，他仍然在个人资料链接中

https://website.com/profile/2

我要完成的工作是，如果用户键入的链接不属于他或她，但对其他人有价值，它将重定向到登录页面。

我不在客户端存储用户数据。

Answer 1

首先，您必须假设用户能够以任何方式操纵网页并访问存储在客户端的所有数据。因此，您不应该在不希望用户访问的客户端上存储敏感数据。（您可能没有这样做，但我认为应该指出这一点。）

我假设您有一个Profile组件。您可以使用Vue Router navigation guards授权过渡，并在不允许的情况下中止或重定向。

如果用户已登录，则可能是在客户机上存储有关已登录用户的信息。您可以使用它来检查正在访问的个人资料页面是否属于登录用户。

在您的个人资料组件中：

beforeRouteEnter(to, from, next) {
  if (!loggedInUser) {
    // User not logged in
    next('/')
  } else if (loggedInUser.id !== to.params.userId) {
    // User is accessing profile page of another user, redirect
    // to their profile page instead
    next({ params: { userId: loggedInUser.id } })
  } else {
    next()
  }
}

这只是您可以执行的操作的一个示例，在不确切了解您的应用如何工作的情况下，我无法给出具体答案。

Vue路由器重定向到登录页面

1 个答案: