Служба аутентификации Nativescript не входит в систему

Я попытался добавить authGuard в учебник продуктового магазина Nativescript. В основном у меня есть страница входа и страница списка, мое приложение попадает на страницу списка, но, если пользователь не вошел в систему (без токена), он отправляет вас на страницу входа. Проблема в том, что когда я нажимаю «Войти», он ничего не делает, и я не получаю ошибок.

это 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.info(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 { }

Кто-нибудь знает, что я делаю не так?

Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
0
56
1

Ответы 1

Вы не направляете пользователя к желаемому маршруту после успешного входа в систему. CanActivate запускается только тогда, когда вы переходите по маршруту с защитой canActivate, которым в вашем случае является ListComponent. Надеюсь, он ответит на твой вопрос, приятель. Вы можете использовать router.navigate для навигации по маршруту.

Другие вопросы по теме