角度2ガードを使用します。ページを更新するときにユーザーをログインさせたままにする方法は？

Question

ここにapp.module.tsファイルでルーティングするための角度コードがあります。

const appRoutes: Routes = [ 
{path: '', component: LoginformComponent}, 
    {path: 'dashboard', component: DashboardComponent, canActivate: [AuthenticationGuard]}, 
    {path: 'user', children: [ 
     {path: '', component: UserComponent}, 
     {path: ':id', component: UserdetailComponent} 
    ], canActivate: [AuthenticationGuard] 
    }, 
    {path: '**', component: NotfoundComponent} 
]; 

次のコードはガードファイルを表しています。

export class AuthenticationGuard implements CanActivate { 

    constructor(private user: UserService, private router: Router) {} 

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    if (! this.user.getUserLoggedIn()) { 
     this.router.navigate(['/']); 
    } 
    return this.user.getUserLoggedIn(); 
    } 
} 

ユーザーとしてログインしたときにGuardが正常に機能します。しかし、それをリフレッシュする場合は、私をログアウトします。ページを更新した後でもシステムにログインしておく方法が必要ですか？

これは、ユーザーservice.tsファイルであり、

@Injectable() 
export class UserService { 
    private isUserLoggedIn: boolean; 
    private username: string; 

    constructor() { 
    this.isUserLoggedIn = false; 
    } 

    setUserLoggedIn(username) { 
    this.isUserLoggedIn = true; 
    this.username = username; 
    } 

    getUserLoggedIn() { 
    return this.isUserLoggedIn; 
    } 

    getUserName() { 
    return this.username; 
    } 
} 

誰かが私を助けることができる..........

Answer 1

あなたがあなたのページを更新すると、アプリケーション全体のことを再びロードされていますコンポーネントがライフサイクルをもう一度経るのですか？アプリケーションのアーキテクチャによっては、あなたはそれがページが更新の間で永続化されるように、認証情報を保存する必要があります。角度を作業するとき

は、最も一般的にJWTが使用されているが、それは必ずしもそうではありません。 JWTを使用している場合は、JWTトークンをクッキーに保存し、アプリの再読み込み時にその存在を確認する必要があります。終了した場合は、Cookieから読み取り、通常の方法で続行します。それ以外の場合は、再度ログインするようユーザーに依頼します。