#angular #redirect
#angular #перенаправление
Вопрос:
У меня есть страница 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.Расположение.href = «dashboard» отлично работает на локальном сервере разработки. Но при размещении на tomcat он не работает. Может ли кто-нибудь предложить решение этой проблемы
Ответ №1:
Если я правильно понимаю вашу проблему, одним из решений будет подписка на события маршрутизатора и делать все, что вы хотите. Это будет выглядеть так
this.router.events.subscribe(val => {
// do what you want
// ...
});
и, конечно, вам нужно будет ввести маршрутизатор, который будет иметь тип маршрутизатора.
constructor(private router: Router) {}
Ответ №2:
Помимо подхода @hayk, вы даже можете создать BehaviorSubject
, на который может быть подписан основной компонент.
Помимо решения вашей проблемы, я бы посоветовал вам реализовать процесс входа в систему как сервис, который будет иметь не только логику входа, но и логику обновления токена (я уверен, что вы также захотите это реализовать)
Преимущество этого заключается в том, что вы можете вызвать метод service не только после входа в систему, но и для различных других сценариев, таких как
- Проверка токена входа всякий раз, когда вы получаете данные с сервера
- в промежутках между переключением маршрутов путем подписки на изменения событий в вашем приложении.компонент
- Используйте
CanActivate
route guard, если у вас есть некоторые компоненты уровня администратора, чтобы сначала проверить наличие повышенного доступа, а затем активировать маршрут.