如果存在令牌，如何将应用的启动重定向到主组件

Question

我想在我的应用程序中应用简单的逻辑，如果验证令牌存在于localStorage中，我想跳过登录。我尝试了各种方法，但都没有成功。

如果应用程序浏览器/应用程序得到刷新，然后，我应该能够重定向到主页，而不是登录页面。

Service.ts

//POST API for Login
loginForm(data: any): Observable<RootObject> {
return this.http
.post<RootObject>(`${environment.baseUrl}/login`, data, this.httpOptions)
.pipe(
tap((resp: RootObject) => this.setUser(resp.Result as Result)),
catchError(this.handleError)
);
}
setUser(resp: Result) {
console.log(resp);
this.authToken = resp.access_token;
localStorage.setItem('username', JSON.stringify(resp.username));
localStorage.setItem('access_token', JSON.stringify(resp.access_token));
localStorage.setItem('expires_in', JSON.stringify(resp.expires_in));
localStorage.setItem('userid', JSON.stringify(resp.userid));
this.router.navigate(['/home']);
}
// Checking if token is set
isLoggedIn() {
return localStorage.getItem('access_token') != null;
}

Auth警卫:-

canActivate()
{
if (!this.auth.isLoggedIn()) {
this.router.navigate(['/login']);
return false;
} else {
return true;
}
}

路线——

const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: "full" },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard]},
{ path: 'login', component: LoginComponent },
{ path: '**', redirectTo: '/login' }
];

请给出解决方法

Answer 1

你应该为Login和Home组件创建2个不同的guard。

const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: "full" },
{ path: 'home', component: HomeComponent }, canActivate: [AuthGuard_2]
{ path: 'login', component: LoginComponent, canActivate: [AuthGuard_1] },
{ path: '**', redirectTo: '/login' }
];

Auth_Guard_1:

canActivate()
{
if (this.auth.isLoggedIn()) {
this.router.navigate(['/home']);
return false;
} else {
return true;
}
}

Auth_Guard_2:

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