登录仪表板加载到该页面后,我有一个Angular页面。我在应用程序组件中有标题,并且从浏览器的本地存储中加载了一些详细信息。但在路由到仪表板后,标题图标未加载,因为我已将ngIf条件设置为标题图标,如下所示
<button
*ngIf="isLoggedIn == 'true'"
mat-icon-button
(click)="snav.toggle()"
>
<mat-icon style="color:white;">menu</mat-icon>
</button>
如果本地存储LoggedIn值为true,则只有此按钮可见。
但在我的情况下,在我的登录组件中点击登录按钮后,它调用一个服务,并从那里我设置了本地存储值。
if (res1["retFlag"] === "0") {
this.http
.post("http://213.136.79.138:8080/gdp/login", obj, httpOptions)
.subscribe(
res => {
console.log(res);
// console.log('userid' + '' + res['userid']);
// tslint:disable-next-line:no-string-literal
if (res["returnFlag"] === 0) {
// tslint:disable-next-line:no-string-literal
const userid = res["loginEmployeeId"];
const username = res["username"];
localStorage.setItem("userid", userid);
localStorage.setItem("isLoggedIn", "true");
localStorage.setItem("username", username);
console.log(username);
// console.log('signed in log val:' + localStorage.getItem('isLoggedIn'));
//window.location.href = "./dashboard";
//this.router.navigate(["dashboard"]);
// var url = '@Url.Action("Action", "/dashboard")';
// window.location.href = url;
this.router.navigateByUrl("dashboard");
// this.router.navigate(['dashboard']);
} else {
alert("Username or Password Incorrect");
}
},
err => {
// this.loading = false;
console.log(err);
}
);
} else {
alert("UserName Not Available");
}
},
err => {
// this.loading = false;
console.log(err);
}
);
但问题是重定向后标头没有刷新。
如果我使用window.location.href =“dashboard”在本地开发服务器上正常工作。但是当托管到tomcat时,它无法正常工作。有人可以建议解决这个问题
除了@ hayk的方法,你甚至可以创建一个BehaviorSubject
,可以由主要组件订阅。
除了解决您的问题之外,我建议您将登录过程实现为一项服务,该服务不仅具有登录逻辑,还具有令牌刷新逻辑(我相信您也希望实现它)
这样做的好处是,您不仅可以在登录后调用服务方法,还可以调用各种其他方案
CanActivate
路由保护。如果我正确理解您的问题,其中一个解决方案是订阅路由器事件并做任何您想做的事情。它看起来像这样
this.router.events.subscribe(val => {
// do what you want
// ...
});
当然,你需要注入具有路由器类型的路由器。
constructor(private router: Router) {}