canActivate 에 대해서

canActivate는 Angular 라우터에서 사용하는 "라우트 접근 제어" 기능이에요.

쉽게 말해:

✅ 어떤 경로로 이동하기 전에
👉 "이 사용자가 이 페이지에 들어갈 수 있는가?"
를 판단하는 가드(guard) 기능입니다.

 

---

✅ canActivate 한 줄 정의

라우트에 접근하기 전에 조건을 검사해서,
❗ 조건을 만족하지 않으면 해당 경로로 진입하지 못하게 막는 기능

---

✅ 예를 들어 이런 상황에서 씁니다

상황예시

로그인 안 한 사용자가 /dashboard에 접근하려고 함	❌ 접근 차단 → /login으로 리디렉션
관리자만 접근 가능한 페이지	✅ isAdmin일 때만 통과
특정 값이 localStorage에 있어야 접근 가능	예: access_token, agreement=true

---

✅ 기본 사용 예시

1. AuthGuard 생성

bash

ng generate guard auth

 

---

2. 가드 로직 작성

ts

 

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    const loggedIn = !!localStorage.getItem('token');

    if (loggedIn) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

 

---

3. 라우팅에 적용 (app-routing.module.ts)

ts

 

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [AuthGuard] // ✅ 이게 핵심!
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

---

✅ 동작 흐름

1. 사용자가 /dashboard로 이동 시도
2. Angular가 AuthGuard.canActivate() 호출
3. true → 통과 / false → 차단 및 다른 경로로 리다이렉트

---

✅ 비슷한 라우터 가드 종류

가드 이름설명

canActivate	라우트에 진입 가능한지 검사
canActivateChild	자식 라우트 접근 제어
canLoad	Lazy load 모듈의 로딩 자체를 막음
canDeactivate	현재 페이지를 벗어나도 되는지 검사 (폼 작성 중 경고 등)

---

✅ 요약

항목설명

canActivate 역할	특정 경로로 진입할 수 있는지 검사하는 함수
사용 위치	라우트 설정 시 canActivate: [가드]
예시	로그인 체크, 권한 체크, 조건 미충족 시 이동 차단