Question

我尝试在Nativescript杂货店教程中添加authGuard。基本上，我有一个登录页面和一个列表页面，我的应用程序位于列表页面上，但是，如果用户未登录（没有令牌），它会将您发送到登录页面。问题是，当我按登录键时，它什么也没做，也没有错误。

这是AuthGuard：

import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { UserService } from "../shared/user/user.service";
import { Config } from "../config";

@Injectable()

export class AuthGuard implements CanActivate{
    constructor(private router: Router, private userService: UserService,) { }

    canActivate() {
        if(Config.token != "") {
            return true;
        } else {
            this.router.navigate(["/login"]);
            return false;
        }
    }
}

这是登录服务

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from "rxjs";
import { catchError, map, tap } from "rxjs/operators";

import { User } from "./user.model";
import { Config } from "../config";

@Injectable()

export class UserService {
    constructor(private http: Http) { }

    register(user: User) {
        return this.http.post(
            Config.apiUrl + "user/" + Config.appKey,
            JSON.stringify({
                username: user.email,
                email: user.email,
                password: user.password
            }),
            { headers: this.getCommonHeaders() }
        ).pipe(
            catchError(this.handleErrors)
        );
    }

    login(user: User) {
        return this.http.post(
            Config.apiUrl + "user/" + Config.appKey + "/login",
            JSON.stringify({
                username: user.email,
                password: user.password
            }),
            { headers: this.getCommonHeaders() }
        ).pipe(
            map(response => response.json()),
            tap(data => {
                Config.token = data._kmd.authtoken;
            }),
            catchError(this.handleErrors)
        );
    }

    getCommonHeaders() {
        let headers = new Headers();
        headers.append("Content-Type", "application/json");
        headers.append("Authorization", Config.authHeader);
        return headers;
    }

    handleErrors(error: Response) {
        console.log(JSON.stringify(error.json()));
        return Observable.throw(error);
    }
}

这是路由器

import { LoginComponent } from "./login/login.component";
import { ListComponent } from "./list/list.component";
import { AuthGuard } from "./shared/authGuard"

export const routes = [
    { path: "", component: ListComponent, canActivate: [AuthGuard] },
    { path: "login", component: LoginComponent }
];

export const navigatableComponents = [
    LoginComponent,
    ListComponent
];

还有app.module

import { NgModule } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { AuthGuard } from "./shared/authGuard"
import { UserService } from "./shared/user/user.service";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from "./app.routing";

@NgModule({
  providers: [ 
    AuthGuard,
    UserService
  ],
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes),
    NativeScriptUIListViewModule
  ],
  declarations: [
    AppComponent,
    ...navigatableComponents
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

有人知道我在做什么错吗？

Answer 1

成功登录后，您没有将用户导航到所需的路线。 CanActivate仅在您使用canActivate保护装置（在您的情况下为ListComponent）导航到路线时执行。希望它能回答您的问题伴侣。您可以使用router.navigate导航到路线。

Nativescript身份验证服务未登录

1 个答案: