使用 PHP 在 Angular2 中设置自定义 AuthGuard

Question

我是 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 文件中，我将管理员的 id 存储在本地存储中：-

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 文件，该文件 returns 以下列方式响应数据：-

{"status":0,"message":"Message comes here","error":}

每当我尝试访问仪表板页面时，checkAdminAuth() 函数必须点击 php 文件来检查身份验证。如果响应状态为0，它将重定向到http://localhost:4200/admin。如果状态是 1，它应该导致 http://localhost:4200/admin/dashboard.

如何触发 checkAdminAuth 函数来获取响应并执行重定向？

Answer 1

您的 AdminAuthGuard 应该实现 CanActivate 接口。它有一个方法 canActivate，它应该包含你在 checkAdminAuth 中的内容。否则它永远不会在路由时被调用。此外 canActivate 应该 return Boolean、Promise<Boolean> 或 Observable<Boolean> 所以你应该将你的结果映射到 return 它。

您想要实现的条件重新路由可以在 AdminAuthGuard 中完成，就像这样

canActivate() {
    if (/*user is logged in*/) {
        this.router.navigate(['/admin']);
        return true;
    }
    else {
        this.router.navigate(['/dashboard']);
    }
    return false;
}

使用 PHP 在 Angular2 中设置自定义 AuthGuard

Setting up a custom AuthGuard in Angular2 using PHP

php

angular2-routing

angular