Frontend - 로그인 (0)

Auth Guard - 코드 내꺼로 바꿔야

canActivate가 true 리턴하면 들어갈 수 있는 페이지임. 얘는 AuthenticationService를 사용해서 로그인 정보를 가져옴. 로그인 해있으면 true 리턴해주고 아니면 login 페이지로 redirect 해줌.

// app/_helpers/auth.guard.ts
import { Injectable } from '@angular/core';
import { Router, ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';

import { AuthenticationService } from '../_services/authentication.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor (private router: Router, private authenticationService: AuthenticationService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    const currentUser = this.authenticationService.currentUserValue;
    if (currentUser) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page
    // Router.navigate()
    // https://angular.io/api/router/Router#navigate
    this.router.navigate(['/login']);
    return false;
  }
}

Basic Authentication Interceptor - 코드 내꺼로 바꿔야

// app/_http-interceptors/basic-auth.interceptors.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

import { AuthenticationService } from '@app/_services';

@Injectable()
export class BasicAuthInterceptor implements HttpInterceptor {
    constructor(private authenticationService: AuthenticationService) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with basic auth credentials if available
        const currentUser = this.authenticationService.currentUserValue;
        if (currentUser && currentUser.authdata) {
            request = request.clone({
                setHeaders: { 
                    Authorization: `Basic ${currentUser.authdata}`
                }
            });
        }

        return next.handle(request);
    }
}

Login Component

로그인 컴포넌트 만들어줌.

ng generate component login

로그인 컴포넌트 라우팅해주고 정해지지 않은 링크에 대해서 ''로 redirect 해줌.

// src/app/app-routing.module.ts
import { AuthGuard } from './_helpers/auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // angular에서 **가 와일드카드임
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppModule에다가 HttpClient를 import 해서 HttpClient 서비스가 앱의 어느곳에서든 사용가능하게 해줌.

// src/app/app.module.ts

// HttpClient 사용하기 위함
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
  ],
})
export class AppModule { }

임시로 test.service.ts라는 서비스 만들어줌.
HttpClient는 observable을 transaction에 사용하기 때문에 obersavlbe을 import 해줘야함

// test.service.ts
import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs';

로그인 컴포넌트에 https://velog.io/@oem0404/EVE-ESI-0 에서 1. 앱이 유저를 EVE SSO가 제공하는 로그인 페이지로 리다이렉트 해줌.을 만들거임.