Frontend - 로그인 (0)
14478 단어 esi_projectAngularAngular
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가 제공하는 로그인 페이지로 리다이렉트 해줌.
을 만들거임.
Author And Source
이 문제에 관하여(Frontend - 로그인 (0)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@oem0404/industryjobclient-로그인-0저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)