Блог

Главная - Вопросы по программированию - Как сохранить токен JWT во всех компонентах Angular

Как сохранить токен JWT во всех компонентах Angular

#angular #django-rest-framework

#angular #django-rest-framework

Вопрос:

У меня есть серверная часть DRF, на которой JWT используется для авторизации, у меня есть пользовательский сервис на моем интерфейсе angular, который обрабатывает получение токена, проверку и обновление. Мой вопрос заключается в том, как эффективно сохранить токен в других компонентах?

В моем компоненте приложения я хочу вызвать API, используя токен JWT, но не знаю, как сохранить токен, сгенерированный из компонента login.

 public login(user) {
    this.http.post('http://localhost:8000/api-token-auth/', JSON.stringify(user), this.httpOptions).subscribe(
      data => {
        this.updateData(data['token']);
          console.warn(data['token']);
      },
      err => {
        this.errors = err['error'];
      }
    );
  }

Комментарии:

1. самым простым способом было бы сохранить его в cookie или в объекте localStorage браузера. Я бы выбрал второй подход, поскольку localStorage в наши дни более моден.

2. @Unsikable прав! Также загляните в HttpInterceptor, чтобы присоединять токен JWT к вызовам

Ответ №1:

Вы можете:

  1. Создайте token свойство в своем сервисе
  2. Сохраните полученный токен в этом свойстве
  3. Создайте getToken() метод для извлечения его извне

Код:

 token = '';

public login(user) {
  this.http.post('http://localhost:8000/api-token-auth/', JSON.stringify(user), this.httpOptions).subscribe(
    data => {
      this.updateData(data['token']);
        console.warn(data['token']);
        this.token = data['token'];
    },
    err => {
      this.errors = err['error'];
    }
  );
}

getToken() {
  return this.token;
}

Затем вы можете внедрить UserService в компонент, в котором вы хотите использовать токен, и вызвать getToken() для его извлечения.

Кроме того, если вы выполняете несколько запросов в своем приложении, которым требуется этот токен, лучшей идеей будет использовать http-перехватчик для включения его в запросы (вы можете использовать тот же подход, что и упомянутый выше, вызывая getToken() внутри перехватчика).