Question

我具有以下API函数：

checkLoggedInAdmin():boolean
  {
    //Get the JWT token from local storage
    let jwt = localStorage.getItem('jwt');
    let httpParams = new HttpParams().set('jwt', jwt);
    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    if(jwt=="" || jwt!=null)
    {
      this.http.post('http://dev.local/scripts/checkLoginAdmin.php', httpParams, {
        headers: headerOptions
      }).subscribe(
        (data)=>{
          if(data==true){
            return this.loggedIn = true;
          }
          else{
            return this.loggedIn = false;
          }
        },
        (error)=>{
          console.log(error)
        }

      )
    }
    else
    {
      this.loggedIn = false;
      return this.loggedIn;
    }
  }

此功能将检查是否存在JWT，然后登录的用户是否是管理员，以允许他浏览其他组件。

以下是canActivate方法。我为此创建了一个新服务，并将其包含在app.module.ts中：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthApiService } from './auth-api.service';
@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate {

  constructor(private router: Router, private authApi: AuthApiService) { }

  canActivate(route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot) :boolean
  { 
    if(this.authApi.checkLoggedInAdmin()==true)
    {
      return true;
    }
    else
    {
      //return false;
      this.router.navigate(['/login'])
    }
  }


}

当用户登录为admin时，PHP返回true；如果不是，则返回false，如果不是，则返回无名的forgot组件。对于login组件为假时，甚至没有重定向。

这是我的路线：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { AuthGuardService } from './auth-guard.service';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },

  {
    path: 'forgot',
    component: ForgotPasswordComponent,
    canActivate: [AuthGuardService]
  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

更改-moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH;函数以返回一个Observable。

在这里，我们使用地图来转换结果，因此您还需要添加以下导入：

checkLoggedInAdmin

然后，只需修改import { map, tap } from 'rxjs/operators'; import { of, Observable } from 'rxjs'; checkLoggedInAdmin():Observable<boolean> { //Get the JWT token from local storage let jwt = localStorage.getItem('jwt'); let httpParams = new HttpParams().set('jwt', jwt); let headerOptions = new HttpHeaders(); headerOptions.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); if(jwt=="" || jwt!=null) { this.http.post('http://dev.local/scripts/checkLoginAdmin.php', httpParams, { headers: headerOptions }).pipe( tap(data => this.loggedIn = (data == true)), map(data => this.loggedIn) ); } else { this.loggedIn = false; return of(false); } }以返回可观察的

canActivate

当返回的结果为true时，CanActivate不显示所需的组件

1 个答案: