Vue Router перенаправить на страницу входа

Question

Я пытаюсь проверить аутентификацию приложения Vue.js.

Предположим, пользователь войдет в систему и перейдет в свой профиль, ссылка будет выглядеть так. https://website.com/profile/1

Он может попасть на свою страницу, но что если он хакер и попытается напечатать

https://website.com/profile/2

, который перейдет в профиль другого человека.

Как я могу перенаправить этого хакера на страницу входа, если он попытался перейти по URL, который не принадлежит его профилю?

Прямо сейчас я могу остановить его от просмотра профиля других людей, но, тем не менее, он все еще находится в ссылке на профиль, даже если он набрал

https://website.com/profile/2

Что я пытаюсь сделать, так это то, что, если пользователи вводят ссылку, которая не принадлежит ему или ей, но которая ценна для других людей, она будет перенаправлена ​​на страницу входа.

Я не храню данные пользователя на стороне клиента.

Answer 1

Во-первых, вы должны предположить, что пользователь может каким-либо образом манипулировать веб-страницей и получать доступ ко всем данным, хранящимся на стороне клиента. Таким образом, вы не должны хранить конфиденциальные данные на клиенте, к которым вы не хотите, чтобы пользователь имел доступ. (Возможно, вы этого не делаете, но я подумал, что должен указать на это.)

Я полагаю, у вас есть компонент профиля. Вы можете использовать средства защиты Vue Router , чтобы авторизовать переход и прервать или перенаправить его, если он запрещен.

Если пользователь вошел в систему, то, вероятно, вы храните информацию о зарегистрированном пользователе на клиенте. Вы можете использовать это, чтобы проверить, принадлежит ли посещаемая страница профиля вошедшему в систему пользователю.

В вашем профиле:

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

Это всего лишь пример того, что вы можете сделать, я не могу дать конкретный ответ, не зная точно, как работает ваше приложение.