不是重定向到NotAuthorized页 - 角2

我有以下app.routes.ts不是重定向到NotAuthorized页 - 角2

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');

正确，但它没有做重定向，并留在同一页面上。我可以做些什么来将用户重定向到另一个“非授权”页面？

感谢您的帮助和时间！

来源

2017-04-11 Johann

不完全确定是否这是问题，但是此[文档]（https://angular.io/docs/ts/latest /guide/router.html#!#navigate）表明你需要使用'this.router.navigate（['/ notAuthorized']）;' –

我已经试过了，但不工作，仍然在同一页！ – Johann

我也试过this.router.navigate（['']）;但不会带我到主页 – Johann

正如评论中所述，问题是一个范围问题，因为this.router在传递的this.handleError范围内是未知的。因此，签名需要更改为private handleError(error: any, router: Router)，订阅中的相应呼叫将为.catch(error => this.handleError(error, this.router))

来源

2017-04-11 14:07:38

不是重定向到NotAuthorized页 - 角2

回答

相关问题