Question

我有以下app.routes.ts

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import { HomeComponent } from '../app/components/home/home.component';
import { LoginComponent } from '../app/components/login/login.component';
import { LoggedInGuard } from '../app/logged-in.guard';
import { CategoriesComponent} from '../app/components/categories/categories.component';
import { LogoutComponent } from '../app/components/logout/logout.component';
import { RegisterComponent} from '../app/components/register/register.component';
import { NotAuthorizedComponent} from '../app/components/not-authorized/not-authorized.component';

const appRoutes: Routes = [
    {path: '', component: HomeComponent, pathMatch: 'full', canActivate: [LoggedInGuard]},
    {path: 'login', component: LoginComponent},
    {path: 'register', component: RegisterComponent},
    {path: 'notAuthorized', component: NotAuthorizedComponent},
    {path: 'categories', component: CategoriesComponent, canActivate: [LoggedInGuard]},
    {path: 'logout', component: LogoutComponent, canActivate: [LoggedInGuard]},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

然后我有categories.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import {Observable} from 'rxjs/Observable';
import {Categories} from '../Categories';
import {Router} from '@angular/router';

@Injectable()
export class CategoriesService {
  apiUrl: string;
  categories: Categories[] = [];

  constructor(private _http:Http, private router:Router) { 
    this.apiUrl = 'http://localhost:50424/api/';
  }

  getCategories() {
    let headers = new Headers();
    headers.append('Content-type', 'application/json');

    let authToken = localStorage.getItem('auth_token');
    headers.append('Authorization', `Bearer ${authToken}`);

    return this._http.get(this.apiUrl+ 'Categories/Get', { headers: headers, withCredentials: true })
      .map(this.extractObject)
      .catch(this.handleError);
  }

   private extractObject(res: Response): Categories {
    let categories = res.json();
    return categories || { };
  }

   private handleError (error: any) {
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
      if (error.status === 401 || error.status === 403) {
        console.log('We have an unathorized request');
        //handle authorization errors
        this.router.navigate(['notAuthorized']);
      }

    return Observable.throw(errMsg);
  }
}

基本上从API中获取一些类别。一切正常，但我想限制只有授权用户。因此，当抛出服务器错误401或403时，我想将用户重定向到NonAuthorized页面。我的代码正在进入

console.log('We have an unathorized request');

正确，但它没有进行重定向，而是停留在同一页面上。我可以做些什么来将用户重定向到另一个“NonAuthorized”页面？

感谢您的帮助和时间！

Answer 1

正如评论中所讨论的，问题是一个范围问题，因为this.handleError在传递的private handleError(error: any, router: Router)范围内是未知的。因此，签名需要更改为.catch(error => this.handleError(error, this.router))，订阅中的相应调用将为var $els = document.querySelectorAll('#site-nav a'); for(i = 0; i < $els.length; i++) { $els[i].addEventListener('mouseover', function() { console.log('yessss'); }); }

不重定向到NotAuthorized页面 - Angular 2

1 个答案: