角度2でリフレッシュするたびにlocalStorageをクリアします

Question

認証後にlocalStorageにトークンを格納していますが、リフレッシュするたびにそのトークンを削除してルータにリダイレクトする必要があります。

私は角度でそれを行う方法がありません。私はプレーンなjsを使用して非常にハッキーな方法を使用しています。

window.addEventListener('load', function (e) { 
    if (window.sessionStorage !== null && (window.location.href.indexOf('/signin') === -1 && window.location.href.indexOf('confirm-user') === -1)) { 
    window.sessionStorage.clear(); 
    window.location.href = '/signin'; 
    } 
}); 

私は認証ガードを追加することを考えていましたが、これを行うためのより角度のある方法があるはずです。

Answer 1

トークンをプレーン変数として格納するための認証サービスを作成し、トークンなしのセキュリティ保護されたページへのリダイレクトを防ぐためにGuardを作成することをお勧めします。あなたは、一つのサービスでそれを実装することができます

@Injectable() 
export class AuthService implements CanActivate, CanActivateChild { 
    token:String; 
    canActivateChild = this.canActivate; 
    constructor(private router: Router) {} 
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     if (!this.token) { 
      this.router.navigate(['/signin']); 
      return false; 
     } 
     return true; 
    } 
} 

export const ROUTES: Routes = [{ 
    path: 'signup', 
    component: SignupComponent 
}, { 
    path: 'securedpath', 
    component: SecuredComponent, 
    canActivateChild: [AuthService], 
    canActivate: [AuthService] 
}] 

しかし、このサービスはシングルトンでなければなりません。それを覚えておいてください。あなたのapp.module（またはJonh Papaのスタイルガイドを使用している場合はcore.module）のプロバイダリストに宣言してください。