angular — Настройка пользовательского AuthGuard в Angular2 с использованием переполнения стека

Я новичок в 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, чтобы получить ответ и выполнить перенаправление?

2

Решение

Ваш 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;
}
1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]