У меня есть приложение angular и я хочу реализовать маршрутизацию на стороне клиента. У меня есть 3 компонента: login, chat и admin. Доступ к админке и чату ограничен авторизированной охраной. В идеале режим маршрутизации должен быть :
- нажмите «Войти» -> «Маршрут для входа в систему» и перенаправьте к администратору
- нажмите «Администратор» или чат -> маршрут для входа в систему и перенаправления при успешном входе в систему при нажатии на (администратор или чат уважительно)
Мне удалось настроить перенаправления почти правильно, но перенаправление при нажатии входа еще зависит от того, где я нажал до / последний. Это означает, что если пользователь нажимает на логин, он переходит в логин, а при успешном входе он перенаправляет в чат. Затем пользователь выходит из системы и нажимает кнопку входа, он входит в систему, но перенаправляет в чат вместо администратора, что мне не нужно. Клики при входе в систему всегда должны go для администратора, независимо от того, какой маршрут был активным в прошлом.
Как этого добиться?
Спасибо.
app.component
<nav>
<ol>
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/admin">Admin</a></li>
<li><a routerLink="/chat">Chat</a></li>
</ol>
</nav>
<router-outlet></router-outlet>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
компонент входа
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {AuthService} from "../auth.service";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
email: string;
password: string;
loginMessage: string;
loginForm: FormGroup;
constructor(
private http: HttpClient,
) { }
ngOnInit() {
this.loginForm = new FormGroup({
'email': new FormControl(this.email, [
Validators.required,
Validators.email
]),
'password': new FormControl(this.password, [
Validators.required,
Validators.minLength(2)
])
});
console.log('init');
}
logout(): void {
this.authService.loggedIn = false;
}
login(): void {
if (!this.isValidInput()) { return; }
const data = {email: this.email, pass: this.password};
this.authService.login('localhost:3000/login', data).subscribe((response: any) => {
this.loginForm.reset();
this.authService.loggedIn=true;
let redirect = this.authService.redirecturl ? this.router.parseUrl(this.authService.redirecturl) : '/admin';
this.router.navigateByUrl(redirect);
});
}
isValidInput(): Boolean {
if (this.loginForm.valid) {
this.email = this.loginForm.get('email').value;
this.password = this.loginForm.get('password').value;
return true;
}
return false;
}
}
<form [formGroup]="loginForm">
<!-- this div is just for debugging purpose -->
<div id="displayFormValues">
Value: {{loginForm.value | json}}
</div>
<label for="email"><b>Email</b></label>
<input id="email" type="email" formControlName="email" email="true" required>
<label for="password"><b>Password</b></label>
<input id="password" type="password" formControlName="password" required>
<button (click)="login()" routerLink="/admin" routerLinkActive="active">Login</button>
<div id="loginMessage">{{loginMessage}}</div>
</form>
компонент администрирования
<p>admin works!</p>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
компонент чата
<p>chat works!</p>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
authgauard
import { Injectable } from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor() {
}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
if (this.authService.isLoggedIn()) {
return true;
} else {
this.authService.redirecturl = url;
this.router.navigate(['/login']);
return false;
}
}
}
модуль приложения-маршрутизации
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChatComponent } from './chat/chat.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{
path: 'login',
component: LoginComponent
},
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuard]
},
{
path: 'chat',
component: ChatComponent,
canActivate: [AuthGuard]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
служба авторизации
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable({
providedIn: 'root'
})
export class AuthService {
redirecturl: string; // used for redirect after successful login
username: string;
loginMessage: string;
greeting = 'Hello guest!';
loggedIn = false;
config = {
serverHost: 'localhost',
serverPort: 3000,
loginRoute: 'login',
standardGreeting: `Hello guest!`,
standardUsername: 'Guest'
};
constructor(private http: HttpClient) { }
login(loginUrl: any, body: { pass: string }) {
return this.http.post(loginUrl, body, httpOptions)
.pipe(
catchError(this.handleError)
);
}
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
return throwError(
'Something bad happened; please try again later.');
}
isLoggedIn(): boolean {
return this.loggedIn;
}
}
}