Безопасно ли хранить пароль и логин в js?

83
19 декабря 2021, 01:00

Есть общий 'login-layout' компонент который роутит другие компоненты :

<div class="login">
  <div class="container">
    <div *ngIf="message!=null || isConfirmed" class="success-message">
      <span *ngIf="message!=null">{{message}}</span>
      <span *ngIf="isConfirmed">Вы успешно активировали почту! Можете авторизоваться</span>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>

И есть два компонента : 1) форма заполнения пароля и логина, 2) выбор организации

const routes: Routes = [
  {
    path: '', component: LoginLayoutComponent,
    children: [
      {
        path: '', redirectTo: 'form'
      },
      {
        path: 'form', component: LoginFormComponent,
      },
      {
        path: 'organizations', component: OrganizationSelectedComponent,
      }]
  },
];

Когда я отправляю логин и пароль с компонента loginForm, на сервере проверяю логин и пароль и получаю список организации в которой он зареган, На сервер повторно отправляю : {login,password,idOrganization}, Получается что в компоненте organizationSelected я должен знать логин и пароль. У меня есть 2 идеи реализовать это, но у них есть минусы: 1) я должен вместо router-outlet вставлять селекторы и через ngif отображать компоненты. 2) я должен создать какой нибудь сервис для обмена данными:

export class LoginDataService {
  private data = new BehaviorSubject<AuthModel>(new AuthModel());
  private data$ = this.data.asObservable();
  constructor() { }
  setData(data: AuthModel) {
    this.data.next(data);
  }
  getData(): Observable<AuthModel> {
    return this.data$;
  }
}

и через router-outlet можно будет генерить компоненты . Является ли 2 - идея безопасным? И какой лучше использовать? Или предложите свои идеи

Answer 1

я и так храню токен на клиенте и с каждым запросом отправляю в хедере. Мой метод контроллера авторизации:

[HttpPost]
        [Transactional]
        public async Task<IActionResult> Post([FromBody] AuthenticationRequest request,
            [FromServices] IAuthenticationManager authentication)
        {
            var jwt = await authentication.AuthenticateWithRefreshAsync(request.Login, request.Password, request.OrganizationBin);
            if (jwt == null)
            {
                return Ok(ApiResponse.Failed(ApiErrorCode.AuthenticationFailed, "Неверный логин\\пароль"));
            }
            return Ok(ApiResponse.Success(jwt));
        }

Модель :

public class AuthenticationRequest {
        [Required]
        public string Login { get; set; }
        [Required]
        public string Password { get; set; }
        [Required]
        public string OrganizationBin { get; set; }
    }    

Вот код который в хедер вписывает токен:

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { AuthService } from '../services/auth.service';
import { Observable, of, throwError } from 'rxjs';
import { Router } from '@angular/router';
import { catchError } from 'rxjs/operators';
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(
    public auth: AuthService,
    private router: Router
  ) { }
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (this.auth.isLoggedIn()) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.auth.getToken()}`
        }
      });
    }
    return next.handle(request);
  }  
}
READ ALSO
Плавная смена картинки через атрибут src js

Плавная смена картинки через атрибут src js

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

80
Загрузить файл в input[file] по ссылке на кариинку

Загрузить файл в input[file] по ссылке на кариинку

Как мне, зная ссылку на файл, (например, http://host/filepath/filenamepng) загрузить его в input[file] для отправки на сервер?

118
JS не видит элементы, созданные им ранее

JS не видит элементы, созданные им ранее

Делаю корзину онлайн магазинаВ правом верхнем углу у меня корзина, куда заносятся купленные товары

162
Использование тайлов Google Maps в leaflet js

Использование тайлов Google Maps в leaflet js

Мне нужно отображать геопозицию агента на карте в своей CRM системеМогу ли я использовать Google Maps тайлы в leaflet JS в коммерческом продукте? Я подключаю...

185