У меня есть очень простой NativeScript / Angular проект, основанный на примере кода:
https://github.com/alexziskind1/nativescript-oauth2/tree/master/demo-angular
В основном это позволяет пользователю войти в систему с Google.
Сразу после того, как пользователь вводит свои учетные данные, он перенаправляется обратно в приложение, и его следует перенаправить на маршрут: /authenticated.
Моя проблема заключается в том, что в файле login.component.ts , когда вызывается метод this.routerExtensions.navigate(["/authenticated"]), в некоторых случаях пользователь перенаправляется на этот маршрут, а иногда нет.Я попытался немного выяснить, каковы обстоятельства, но это выглядит случайным.
С другой стороны, я должен сказать, что я всегда получаю токен доступа, зарегистрированный на консоли.Так что authService работает нормально, но то, что он не работает нормально, это навигация.
Кроме того, я не знаю, нужно ли мне использовать:
this.routerExtensions.navigate(["/authenticated"])
или
this.routerExtensions.navigate(["../authenticated"])
В примере кода с официального сайта есть две точки (второй случай), как вы можете видеть здесь:
https://github.com/alexziskind1/nativescript-oauth2/blob/master/demo-angular/src/app/login/login.component.ts#L23
но, похоже, это не проблема.
Я думаю, что здесь что-то пропущено.
Ниже у вас есть некоторые фрагменты моего кода.
Есть идеи, как мне решить эту ситуацию?
Спасибо!
app.component.html
<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
<page-router-outlet></page-router-outlet>
app-routing.module.ts
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";
import { LoginComponent } from "./screens/login/login.component";
import { AuthenticatedComponent } from "./screens/authenticated/authenticated.component";
import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: "authenticated", component: AuthenticatedComponent },
{ path: "items", component: ItemsComponent },
{ path: "item/:id", component: ItemDetailComponent }
];
@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }
login.component.html
<ActionBar title="My App" class="action-bar"></ActionBar>
<StackLayout class="form">
<Button text="Login Social Network" (tap)="onTapLogin()" class="btn btn-primary btn-active"></Button>
</StackLayout>
login.component.ts
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular";
import { ITnsOAuthTokenResult } from "nativescript-oauth2";
import { Page } from "tns-core-modules/ui/page/page";
import { AuthService } from "../../services/auth.service";
@Component({
templateUrl: "./login.component.html",
styleUrls: ["./login.component.scss"],
})
export class LoginComponent implements OnInit {
constructor(private page: Page, private authService: AuthService, private routerExtensions: RouterExtensions) {
page.actionBarHidden = true;
}
ngOnInit(): void {
}
public onTapLogin() {
this.authService
.tnsOauthLogin("google")
.then((result: ITnsOAuthTokenResult) => {
console.log("back to login component with token " + result.accessToken);
this.routerExtensions
.navigate(["/authenticated"])
.then(() => console.log("navigated to /authenticated"))
.catch(err => console.log("error navigating to /authenticated: " + err));
})
.catch(e => console.log("Error: " + e));
}
}
auth.service.ts
import { Injectable } from "@angular/core";
import {
TnsOAuthClient,
ITnsOAuthTokenResult
} from "nativescript-oauth2";
@Injectable()
export class AuthService {
private client: TnsOAuthClient = null;
constructor() { }
public tnsOauthLogin(providerType): Promise<ITnsOAuthTokenResult> {
this.client = new TnsOAuthClient(providerType);
return new Promise<ITnsOAuthTokenResult>((resolve, reject) => {
this.client.loginWithCompletion(
(tokenResult: ITnsOAuthTokenResult, error) => {
if (error) {
console.error("back to main page with error: ");
console.error(error);
reject(error);
} else {
console.log("back to main page with access token: ");
console.log(tokenResult);
resolve(tokenResult);
}
}
);
});
}
public tnsOauthLogout() {
if (this.client) {
this.client.logout();
}
}
}