구성 요소를로드하기 전에 헤더에서 인증 토큰 가져 오기

구성 요소에 대한 가시성 제한을 처리하는 방법에 대한 두 가지 아이디어가 있다고 생각합니다.

애플리케이션에서 auth.service.ts에서 로그인 및 기타 인증을 처리 할 수 ​​있습니다.

// auth.service.ts
@Injectable({
  providedIn: 'root'
})
export class AuthService {
private token: string;
private loggedIn = false;

constructor(private http: HttpClient) {}


getLoggedIn() {
  return this.loggedIn;
}

login(email:string, password:string): Promise <string> {
  const promise = new Promise < string > ((resolve, reject) => {
    const authData = { email: email, password: password }
      this.http.post < { token: string } > (environment.backendUrl + '/api/user/login', authData).toPromise()
      .then(response => {
         const token = response.token;
         this.token = token;
         if (token) {
           this.loggedIn = true;
         }
}

위의 스 니펫에서 볼 수 있듯이 로그인이 성공하면 응답 본문에 토큰이 수신됩니다.이 토큰은 애플리케이션에서 토큰을 얻는 방법과 비슷합니다. 그런 다음이 response.token을 auth.service.ts 파일 내의 토큰 변수에 할당합니다. 토큰이 auth.service.ts 파일 내의 변수에 할당 된 후에는 auth.service.ts 파일을 가져 와서 애플리케이션의 어느 곳에서나 getLoggedIn () 함수를 호출하여 토큰을 읽고 확인할 수 있습니다.

이제 토큰을 확인하여 구성 요소의 가시성을 제한하는 방법으로 돌아갑니다. 한 가지 방법은 auth.service.ts 파일을 다음과 같이 생성자에 추가하여 구성 요소 가시성을 제한하려는 구성 요소로 가져올 수 있습니다.

// .ts file where you want to restrict visibility
export class component {
loggedIn = false;

constructor(private authService: AuthService) {}

ngOnInit() {
   this.loggedIn = this.authService.getLoggedIn();
}

ngOnInit 호출 중에 구성 요소가 토큰을 확인하는 것을 볼 수 있습니다. 이는 해당 html 파일에서이 logsin 변수를 * ngIf와 함께 사용하여 특정 html 요소 또는 원하는 경우 전체 구성 요소의 가시성을 제한 할 수 있음을 의미합니다.

// .html file
<div *ngIf=loggedIn>
   <h1> title </h1>
   <p> here you be your text </p>
</div>

또 다른 방법은 mikhail과 gytis가 이전에 언급했듯이 경비를 구현하는 것입니다. 이 가드는 페이지로 라우팅하기 전에 토큰을 확인하여 로그인 한 사용자 만 특정 페이지를 방문 할 수 있는지 확인합니다. 다음과 같이 auth.guard.ts 파일을 추가하여이를 수행 할 수 있습니다.

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable < boolean > | Promise < boolean > {
    const loggedIn = this.authService.getLoggedIn();
    if (!loggedIn) {
      this.router.navigate(['/login']);
    }
    return loggedIn;
  }

}

이 파일을 추가하면 app-routing.ts 파일에서 다음과 같이 tokencheck를 활성화 할 수 있습니다.

// app-routing.ts file
const routes: Routes = [
    { path: "", component: HomePageComponent },
    { path: "home", component: HomePageComponent },
    { path: "login", component: LoginPageComponent },
    { path: "signup", component: SignupPageComponent },
    { path: "profile/:id", component: ProfilePageComponent, canActivate: [AuthGuard] },

]

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

스니핑 된 프로필 페이지는 AuthGuard에 의해 보호되므로 로그인 한 사용자 만이 페이지를 방문 할 수 있습니다. 사용자가 AuthGuard에 로그인되어 있지 않으면 사용자를 로그인 페이지로 리디렉션하므로 브라우저에 URL을 수동으로 입력하더라도 페이지를 방문하기 전에 로그인해야합니다.

나는 또한 아주 새로운 것이지만 나는 당신에게 도움이 될 수 있기를 바라면서 당신을 위해 명확한 답변을 작성하기 위해 최선을 다했습니다! :) 좋은 하루 되세요!