Я новичок в Angular2 и в настоящее время учусь.
Это структура папок в моем проекте.
var/www/html/
|_(angproject)
|_(phpscript)
| |_login.php
|_(src)
|_(app)
|_(admin)
| |_(login)
| | |_login.component.ts
| |
| |_admin.component.ts
|
|_(_admin_service)
| |_admin.login.ts
|
|_(_animations)
|
|_(front)
|
|_(_models)
| |_admin.model.ts
|
|_(_authguard)
| |_adminauth.guard.ts
|
|_app.adminroute.ts
|_app.module.ts
Это мое app.adminroute.ts файл:-
import { RouterModule, Routes } from '@angular/router';
import { APP_BASE_HREF } from '@angular/common';
import { CanActivate } from "@angular/router";
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './admin/login/login.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { AdminAuthGuard } from './_authguard/adminauth.guard';
export const appAdminRoutes: Routes = [
{ path: 'admin',
component: AdminComponent,
children: [
{ path: '', component: LoginComponent},
{ path: 'dashboard', component: DashboardComponent, canActivate: [AdminAuthGuard] }
]
}
];
В моем login.component.ts файл, я храню Я бы админа в местном хранилище: —
submitPost()
{
this._adminLogin.postAdminLogin(this.adminLoginmodel).subscribe(
data => {
this.responseStatus = data;
if(this.responseStatus.status == 1)
{
localStorage.setItem('admin_id', this.responseStatus.detail.id);
//console.log(localStorage.getItem("admin_id"));
this.router.navigate(['admin/dashboard'])
}
else
{
alert('Login Error');
}
},
err => {
console.log(err)
},
() => {}
);
this.status = true;
}
Это мое adminauth.guard.ts файл:-
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
@Injectable()
export class AdminAuthGuard {
http : Http;
actionUrl : string;
admin_auth_Url: string;
adminAuthResponse:Object= [];
constructor(public _http: Http) {
this.http = _http;
this.admin_auth_Url = 'http://localhost/angproject/phpscript/isadminlogin.php';
}
checkAdminAuth() {
let headers = new Headers();
headers.append("Accept", "q=0.8;application/json;q=0.9");
this.actionUrl = this.admin_auth_Url;
return this.http.post(this.actionUrl,
{admin_id:localStorage.getItem("admin_id")},
{ headers: headers })
.map(res => res.json()).share();
}
}
Функция checkAdminAuth()
вызывает файл php, который возвращает данные ответа следующим образом:
{"status":0,"message":"Message comes here","error":}
Всякий раз, когда я попытаюсь посетить страницу панели инструментов, checkAdminAuth () Функция должна нажать на файл php, чтобы проверить аутентификацию. Если статус ответа 0, он будет перенаправлен на http://localhost:4200/admin
, Если статус 1, это должно привести к http://localhost:4200/admin/dashboard
,
Как я могу запустить функцию checkAdminAuth, чтобы получить ответ и выполнить перенаправление?
Ваш AdminAuthGuard
следует реализовать CanActivate
интерфейс. У него есть метод canActivate
и он должен содержать то, что у вас есть в вашем checkAdminAuth
, В противном случае он никогда не будет вызываться во время маршрутизации. Так же canActivate
должен вернуться Boolean
, Promise<Boolean>
или же Observable<Boolean>
поэтому вы должны отобразить свой результат, чтобы вернуть его.
Условное изменение маршрута, которое вы хотите получить, может быть выполнено в AdminAuthGuard
как это
canActivate() {
if (/*user is logged in*/) {
this.router.navigate(['/admin']);
return true;
}
else {
this.router.navigate(['/dashboard']);
}
return false;
}
Других решений пока нет …