앵귤러 튜토리얼 (Angular tutorial) -25 with 파이어 베이스

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

이번시간에는 라우터를 통한 페이지 이동방법과 로그아웃기능에 대해서 알아보도록 하겠다.

라우터객체는 앵귤러에서 페이지 이동할때 사용되는 객체이며 앞전시간에도 살펴보았었다.

기존에 만들다 만 로그인 페이지를 조금 더 고쳐보도록하자.

login.component.ts를 아래처럼 수정하여 보자.

import { Component, OnInit } from '@angular/core';
import {SessionService} from '../session.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  private id ;
  private password;

  constructor(private session : SessionService, private rout: Router) {  //페이지 이동을 위한 router 객체

  }

  ngOnInit() {
  }
  
  login(){
    if(this.id == 'admin' && this.password == '1234'){
      console.log(this.id, this.password);
      this.session.setInfo(this.id);  
      this.rout.navigateByUrl('board');  //board로 이동시킨다.
    }
  }
}

navigateByUrl이라는 함수를 호출하여 board라는 곳으로 페이지를 이동시켰다. 메소드 이름도 직관적이라 그리 어렵지않다.

이제 로그인이 성공되면 board페이지로 이동하게 해주는 기능이 완료되었다.

인터셉터 역할을 하는 guard도 조금 수정하여보자.

inerceptor.guard.ts를 아래처럼 수정하자.

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import {SessionService} from './session.service';
import { Router } from '@angular/router';

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

  constructor(private session : SessionService, private rout: Router) {  //페이지 이동을 위한 router 객체


  }

  canActivate( next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    var info : any = this.session.getInfo();
    console.log(info);
    if(info != null){
      return true;
    }
    this.rout.navigateByUrl(''); 
    return false; //요부분
  }
  
}

로그인 정보가 없으면 기본 로그인 페이지로 이동하도록 코드가 변경이 되었다.

그러면...이제 로그인은 되었는데 로그아웃기능이 필요하여졌다.

로그아웃은 localStorage에 있는 정보를 제거하면 되는데 사용법은 어렵지 않다. 이를 위해 session.service.ts 파일을 수정하여 보자.

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class SessionService {
  
  constructor(private rout: Router) { 

  }

  setInfo(userId){
    localStorage.setItem('id', userId);
  }

  getInfo() : string{
    return localStorage.getItem('id');
  }

  logOut(){  //로그아웃
    localStorage.removeItem('id');
    this.rout.navigateByUrl(''); 
  }
}

removeItem이라는 함수를 호출하므로써 저장되어있는 id값을 제거하도록 하였다. 그리고 나서 로그인페이지로 이동하도록 라우팅을 하였다.

로그인 정보에 따른 타임아웃은 시간을 활용해서 계산을 하여 로그인시간이 일정시간 지난경우 removeItem 함수를 호출하면 되는 것이다. 해당부분은 직접 구현하여 보자.

 

다음시간에는 미루어 두었던 파이어베이스를 통한 파일업로드에 대해서 살펴보도록 하자.

src.zip

0.01MB