인증 | 풀스택개발 EastFlag

로그인 화면 생성

컴포넌트를 생성한다.

ng g component login

1	ng g component login

app.component.html에 로그인 링크를 추가한다.

      <li class="nav-item"  routerLinkActive="active">
        <a class="nav-link" href routerLink="/login">login</a>
      </li>

<a class="nav-link" href routerLink="/login">login</a>

</li>

로그인 화면을 만든다. 12칸중 4칸을 사용하는데 앞쪽에 offset을 4칸 주었다. 모바일 화면에서도 테스트해보자.

ngNativeValidate 를 줬기 때문에 html5 폼 validation 체크를 수행한다. id는 required와 email체크를 수행하고 password는 required 체크를 수행한다.

<div class="row mt-5">
  <div class="offset-sm-4 col-sm-4">
    <form class="form-group" ngNativeValidate (submit)="login()">
      <h2>Please sign in</h2>

      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>

      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>

      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </div>
</div>

<h2>Please sign in</h2>

<label for="inputEmail" class="sr-only">Email address</label>

<label for="inputPassword" class="sr-only">Password</label>

<label>

<input type="checkbox" value="remember-me"> Remember me

</label>

</div>

</form>

</div>

submit시에 콘솔에 찍기만 했다.

  login() {
    console.log('login');
  }

console.log('login');

}

로그인 구현

로그인 로직을 구현한다. 먼저 /api/login 의 rest api 테스트를 수행한다.

입력으로 보낼 email, password를 저장할 member vo 객체를 추가한다.

export class MemberVo {
  email: string;
  password: string;
}

export class MemberVo {

email: string;

password: string;

}

로그인 서비스를 구현한다.

  login(member: MemberVo) {
    return this.http.post<ResultVo>(environment.HOST + `/api/login`, member, {headers: this.headers});
  }

return this.http.post<ResultVo>(environment.HOST + `/api/login`, member, {headers: this.headers});

}

export class LoginComponent implements OnInit {
  member = new MemberVo();

  constructor(private router: Router, private toaster: ToasterService, private heroService: HeroService) {
    this.member.email = 'admin@15.164.133.165';
    this.member.password = '123456';
  }

  ngOnInit() {
  }

  login() {
    console.log('login');
    this.heroService.login(this.member)
      .subscribe(body =&gt; {
        console.log(body);
        if (body.result === 0) {
          localStorage.setItem('token', body.data['token']);
          //
          if (localStorage.getItem('redirect_url')) {
            this.router.navigateByUrl(localStorage.getItem('redirect_url'));
          } else {
            this.router.navigateByUrl('/');
          }

          this.toaster.pop('success', 'success', '로그인하였습니다.');
        } else {
          this.toaster.pop('fail', 'fail', '로그인에 실패하였습니다.!!!');
        }
      });
  }
}

export class LoginComponent implements OnInit {

member = new MemberVo();

constructor(private router: Router, private toaster: ToasterService, private heroService: HeroService) {

this.member.email = 'admin@15.164.133.165';

this.member.password = '123456';

}

ngOnInit() {

}

console.log('login');

this.heroService.login(this.member)

.subscribe(body => {

console.log(body);

if (body.result === 0) {

localStorage.setItem('token', body.data['token']);

if (localStorage.getItem('redirect_url')) {

this.router.navigateByUrl(localStorage.getItem('redirect_url'));

} else {

this.router.navigateByUrl('/');

}

this.toaster.pop('success', 'success', '로그인하였습니다.');

} else {

this.toaster.pop('fail', 'fail', '로그인에 실패하였습니다.!!!');

}

});

}

login은 http로 아이디/패스워드를 보내서 성공하면 서버에서 JWT 토큰을 생성해서 주는데, 이것을 스토리지에 저장한다. redirect_url이 의미하는것은 로그인후에 이동할 유알엘이다. 예를 들어, 만일 admin메뉴에 접속시 로그인 되어있지 않다면 블락킹되고 로그인 화면으로 이동할 것이다. 로그인을 성공하면 바로 이전에 접속할려고 했던 admin 화면으로 이동하게 된다. 없다면 초기화면으로 이동한다.

인증 서비스

ng g service auth-guard

1	ng g service auth-guard

logout 함수와 isLogin 함수를 구현한다.

logout 은 스토리지에 저장된 토큰을 지운다.

isLogIn은 토큰 유효성을 검사해서 유효하면 true 그렇지 않으면 false를 리턴한다. 로그인이 되었다면 localStorage에 token이 저장되었을 것이다. 개발자도구에서 Application 탭에서 토큰 정보를 꺼내서 파싱테스트를 해보자.

JWT에 관한 자세한 사항은 아래 사이트를 참고하자.

https://jwt.io

body 부분을 파싱하면 다음과 같은 형태로 나와야 한다.

{jti: “3”, iat: 1545270813, sub: “”, iss: “admin@15.164.133.165”, exp: 1545357213}

여기서 등록된 claim 인지 아닌지 RFC 7519 문서를 보고 파악해보자.

logout() {
  localStorage.removeItem('token');
  this.router.navigateByUrl('/');
}

isLogIn() {
  const token = localStorage.getItem('token');
  if (!token) {
    return false;
  }
  // jwt 토큰 유효성 검증
  let base64Url = token.split('.')[1]; // head + payload + signature
  let base64 = base64Url.replace('-', '+').replace('_', '/');
  const payload = JSON.parse(window.atob(base64));
  console.log(payload);

  if (payload.exp - new Date().getTime() / 1000 &gt; 0 ) {
    return true;
  } else {
    return false;
  }
}

logout() {

localStorage.removeItem('token');

this.router.navigateByUrl('/');

}

isLogIn() {

const token = localStorage.getItem('token');

if (!token) {

return false;

}

// jwt 토큰 유효성 검증

let base64Url = token.split('.')[1]; // head + payload + signature

let base64 = base64Url.replace('-', '+').replace('_', '/');

const payload = JSON.parse(window.atob(base64));

console.log(payload);

if (payload.exp - new Date().getTime() / 1000 > 0 ) {

return true;

} else {

return false;

}

뷰 바인딩

뷰에서는 템플릿 드리븐폼으로 작성하고 바인딩한다.

<div class="row mt-5">
  <div class="offset-sm-4 col-sm-4">
    <form class="form-group" ngNativeValidate (ngSubmit)="login()">
      <h2>Please sign in</h2>

      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus
             name="email" [(ngModel)]="member.email">

      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="Password" required
             name="password" [(ngModel)]="member.password">

      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
  </div>
</div>

<h2>Please sign in</h2>

<label for="inputEmail" class="sr-only">Email address</label>

<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus

name="email" [(ngModel)]="member.email">

<label for="inputPassword" class="sr-only">Password</label>

<input type="password" id="inputPassword" class="form-control" placeholder="Password" required

name="password" [(ngModel)]="member.password">

<label>

<input type="checkbox" value="remember-me"> Remember me

</label>

</div>

</form>

</div>

이제 인증 테스트를 해보자. 로그인이 성공하면 홈화면으로 이동하는데, 먼가 아쉬운 부분이 보이는가?

그렇다. 로그인이 성공했는데, 아직도 상단 메뉴가 login으로 되어있다. 로그인이 성공하면 logOut으로 바꾸자. 컴포넌트에서인증 서비스를 public 접근자로 해놓으면 뷰에서 바로 접근이 가능하다.

      <li class="nav-item"  routerLinkActive="active" *ngIf="!authService.isLogIn()">
        <a class="nav-link" href routerLink="/login">login</a>
      </li>
      <li class="nav-item"  routerLinkActive="active" *ngIf="authService.isLogIn()">
        <a class="nav-link" href (click)="authService.logout()">logout</a>
      </li>

<a class="nav-link" href routerLink="/login">login</a>

</li>

<a class="nav-link" href (click)="authService.logout()">logout</a>

</li>

Admin 모듈 인증

테스트 편의를 위해서 상단 메뉴에 admin 메뉴도 추가한다. 실제로 admin 메뉴를 노출하는것은 바람직하지 않다.

      <li class="nav-item"  routerLinkActive="active">
        <a class="nav-link" href routerLink="/admin">admin</a>
      </li>

<a class="nav-link" href routerLink="/admin">admin</a>

</li>

제일 먼저 auth-guard.service 에서 CanLoad 인터페이스를 implements한다.

export class AuthGuardService implements CanLoad {

  . . .

  canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
    let url = `/${route.path}`;
    console.log(url);
    if (this.isLogIn()) {
      return true;
    } else {
      localStorage.setItem('redirect_url', url);
      this.router.navigateByUrl('login');
      return false;
    }
  }
  }</boolean></boolean>

export class AuthGuardService implements CanLoad {

. . .

canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {

let url = `/${route.path}`;

console.log(url);

if (this.isLogIn()) {

return true;

} else {

localStorage.setItem('redirect_url', url);

this.router.navigateByUrl('login');

return false;

}

}</boolean></boolean>

그리고 라우팅 패스에 설정한다. 인증 서비스를 추가한다.

  {
    path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuardService]
  },

{

path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuardService]

이제 admin 모듈로 진입하게 되면 AuthGuardService가 true를 리턴하면 진입이 가능하고 false를 리턴하면 진입할수 없고 로그인 화면으로 이동하게 된다.

로그인을 하지 않고 admin 모듈로 진입하게 되면 진입이 되지 않고 로그인화면으로 튕기는것을 알 수 있다. 로그인을 성공하면 redirect_url을 기억했기 때문에 직전 화면으로 이동하게 된다.