Как реализовать авторизацию в Vue JS

0

Introduction

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

  • Как мне хранить токен пользователя?
  • Как перенаправить пользователя после действий аутентификации (вход / выход)?
  • Как ограничить доступ к маршрутам для неаутентифицированных пользователей?

В этой статье мы рассмотрим эти вопросы и попытаемся проиллюстрировать с четким кодом и хорошей практикой.

Однако имейте в виду, что все проекты имеют различное аутентифицированное поведение. Проекты могут иметь только экран загрузки, пока вы не войдете в систему (Gmail) или можете видеть приложение, но не иметь доступа к функциям (Amazon), поэтому вам, придется настроить то, что я опишу здесь под себя.

Прежде чем мы начнем

Я сделал этот репозиторий, если вы хотите запустить какой-то код из статьи.

Мы используем Vuex как глобальное хранилище данных. Vuex особенно подходит для управления auth, так как это его область применения. Но если вы не хотите использовать Vuex, не беспокойтесь, мы также рассмотрим пример кода без Vuex.

Мы также используем библиотеку axios для вызовов ajax.

Наконец, в этой статье не будет показано, как реализовать внутреннюю сторону процесса аутентификации. Мы сосредоточимся только на стороне клиента.

1

Авторизация

Начнем с простой формы входа:

Когда пользователь заполнил входные данные и нажал Login, мы выполним метод входа.

Вот первый важный аспект этого фрагмента кода.

Действия Vuex возвращают promises.

this.$store.dispatch(AUTH_REQUEST, { username, password }).then(...)

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

Тот же код без Vuex:

2

Vuex Auth модуль

Давайте посмотрим на этот модуль auth:

Сначала инициализируем состояние.

Мы будем иметь поле токена (используя токен с локального хранилища, если он есть) и поле состояния, представляющее статус вызова API (loading, success или error).

Как насчет использования localStorage, а не файлов cookie?

Ну, они на самом деле оба являются хорошим решением, с их собственными преимуществами и недостатками. Этот пост и эта страница очень хорошо отвечают на этот вопрос.

Некоторые полезные геттеры:

IsAuthenticated getter может показаться излишним, однако это отличный способ сохранить вашу аутентификацию futur proof. Имея этот getter, вы отделяете данные от логики приложения, что делает его доказательством futur

Теперь actions:

И mutations:

Достаточно простой вызов API из модуля. Важными аспектами являются:

  • Состояние токена инициализируется значением из локальной памяти, если это возможно.
  • Действие запроса проверки подлинности возвращает promise, полезный для перенаправления при успешном входе в систему.
  • Хорошая практика: передать учетные данные для входа в тело запроса, а не в URL. Причина этого в том, что серверы могут регистрировать URL-адреса, поэтому вам не нужно беспокоиться о утечке учетных данных через логи.
3

Logout

Поскольку мы уже этим занялись, давайте реализуем логику выхода в модулях / auth.js:

При нажатии на кнопку выхода из системы в одном из компонентов, ответственных за выход из системы:

В этом случае выход для нас означает очистить токен пользователя и перенаправить его. Если вам нужно выполнить другие изменения состояния Vuex, сделайте это в AUTH_LOGOUT.

Вы также можете добавить запрос DELETE в action, чтобы удалить сеанс токена пользователя при выходе из него.

Постарайтесь реализовать это максимально просто, с минимальным количеством действий для входа / входа.

Если вы начнете создавать отдельный action входа / выхода из системы на каждый тип аутентификации, который у вас есть, у вас будет головная боль.

4

Использование токена

Теперь, когда нам удалось получить токен и сохранить его, давайте использовать его!

В следующем примере используется Axios и его заголовки по умолчанию.

Теперь после входа в систему все вызовы Axios имеют заголовок авторизации, установленный с вашим токеном. Все ваши вызовы API аутентифицированы! И при выходе из системы мы удаляем заголовок авторизации.

5

Авто аутентификация

Прямо сейчас, если мы обновляем приложение, у нас есть состояние, правильно настроенное на предыдущий токен. Тем не менее, заголовок Axios авторизации не установлен. Давайте исправим это!

Теперь ваши вызовы API аутентифицируются при обновлении вашего приложения после входа в систему.

6

Аутентифицированные маршруты

Теперь вы, вероятно, хотите ограничить доступ к своим маршрутам в зависимости от того, прошла ли авторизация успешно или нет.

В этом случае мы хотим, чтобы только пользователи, прошедшие проверку, могли попасть в /account.

И пользователи, не прошедшие проверку, должны иметь доступ только к /login и /.

Здесь мы используем навигационные механизмы, они позволяют нам устанавливать условия доступа к маршрутам, которые мы используем в наших интересах в сочетании с хранилищем Vuex.

Примечание 1: Если вы не хотите использовать Vuex, вы можете проверить наличие токена в локальном хранилище, а не смотреть в store.

7

Недействительный токен

… но подождите, что, если токен истек, что делать, если пользователь уже не авторизован?

Здесь не беспокойтесь.

Используя Axios, вы можете перехватить все ответы и, особенно, ответ об ошибке. Просто проверьте все неавторизованные ответы (HTTP 401), и если он пришел, отправьте действие выхода из системы.

8

Что у нас вышло

  • Изолированная логика аутентификации из приложения и других библиотек
  • Нам не нужно явно передавать токены каждому вызову API
  • Все вызовы API обрабатываются без аутентификации
  • У нас есть авто аутентификация
  • У нас ограниченный доступ к маршрутам

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

Удачи в изучении Vue!!! ?

Похожие публикации

Комментарии

  1. pavel-else 24.12.2018 в 02:02

    Крутая статья, спасибо!