Я занимаюсь разработкой веб-приложения с использованием Angular-7.У меня есть страницы входа в систему, домашние и целевые страницы:
login.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../shared/services/api.service';
import { TokenService } from '../../../shared/services/token.service';
import { Router, Route } from '@angular/router';
import { AuthService } from '../../../shared/services/auth.service';
import { SnotifyService } from 'ng-snotify';
import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
declare var $;
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
public loggedIn: boolean;
public form = {
email : null,
password : null,
remember_me : false
};
student = null;
name = null;
students = null;
public error = null;
constructor(
private api: ApiService,
private token: TokenService,
private router: Router,
private auth: AuthService,
private notify: SnotifyService,
private spinnerService: Ng4LoadingSpinnerService
) {}
ngOnInit() {
if(this.token.loggedIn) {
this.router.navigateByUrl('/home');
}
document.body.className = 'hold-transition login-page';
$(() => {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' /* optional */
});
});
}
onSubmit(){
this.notify.info('Wait...', {timeout: 0});
this.spinnerService.show();
var headers = {
'Content-Type' : 'application/json'
}
return this.api.post('login', this.form, headers).subscribe(
data => this.tokenHandler(data),
error => this.errorHandler(error.error)
);
}
errorHandler(error){
this.spinnerService.hide();
this.notify.clear();
console.log(error);
if(error.errors && error.errors.email){
this.error = error.errors.email;
}
else if(error.message=='Unauthorized'){
this.error = null;
this.notify.error('Invalid Login Details or email not confirmed', {timeout: 0})
} else {
this.error = null;
this.notify.error(error.message, {timeout:0})
}
}
tokenHandler(data){
this.notify.clear();
console.log(data);
this.token.setRoles(data.user.roles);
this.token.set(data.token_type + " " + data.access_token, data);
this.auth.changeAuthStatus(true);
this.loggedIn = true;
this.notify.info('Login Succesfully', {timeout: 2000});
this.wait(999);
this.router.navigateByUrl('/home');
window.location.reload();
}
private wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
}
home.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Router, NavigationEnd } from '@angular/router';
import {dashboard2} from 'src/assets/dist/js/pages/dashboard2.js';
import { RolesCheckService } from 'src/app/shared/services/roles-check.service';
declare var $;
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
isAdmin = false;
isStaff = false;
isManager = false;
constructor(private role: RolesCheckService) { }
ngOnInit() {
window.dispatchEvent(new Event('load'));
window.dispatchEvent(new Event('resize'));
document.body.className = 'skin-blue sidebar-mini';
if(localStorage.getItem('token') !=null && localStorage.getItem('role')==null) {
this.wait(1100);
}
this.isAdmin = this.role.isAdmin || this.role.isSuperAdmin;
this.isStaff = this.role.isStaff;
this.isManager = this.role.isManager;
}
private wait(ms){
var start = new Date().getTime();
var end = start;
while(end < start + ms) {
end = new Date().getTime();
}
}
ngOnDestroy(): void {
document.body.className = '';
}
}
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/landing', pathMatch: 'full' },
{ path: 'landing', component: LandingPageComponent },
{
path: 'login',
component: LoginComponent
},
{
path: 'client-quote-landing',
component: ClientQuotesLandingComponent
},
{
path: 'home',
component: HomeComponent,
canActivate : [AfterloginService]
},
];
Целевая страница является страницей по умолчанию.После этого страница входа, а затем домашняя страница
landing-component.html
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li><a routerLink="/login"><i class="fa fa-unlock margin-right-10px"></i> Login</a></li>
</ul>
</div>
Я ожидаю, что когда я нажму на кнопку «Войти в систему», как показано выше.Но скорее он перенаправляет меня на домашнюю страницу.
Как мне решить эту проблему?