Skip to content

Commit 849fc75

Browse files
author
vakrilov
committed
Reslove guard added to login example
1 parent bc5cdc9 commit 849fc75

File tree

3 files changed

+156
-90
lines changed

3 files changed

+156
-90
lines changed

‎ng-sample/.vscode/launch.json

+68-83
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,70 @@
11
{
2-
"version": "0.2.0",
3-
"configurations": [
4-
{
5-
"name": "Launch on iOS Device",
6-
"type": "nativescript",
7-
"platform": "ios",
8-
"request": "launch",
9-
"appRoot": "${workspaceRoot}",
10-
"sourceMaps": true,
11-
"diagnosticLogging": false,
12-
"emulator": false
13-
},
14-
{
15-
"name": "Attach on iOS Device",
16-
"type": "nativescript",
17-
"platform": "ios",
18-
"request": "attach",
19-
"appRoot": "${workspaceRoot}",
20-
"sourceMaps": true,
21-
"diagnosticLogging": false,
22-
"emulator": false
23-
},
24-
{
25-
"name": "Launch on iOS Emulator",
26-
"type": "nativescript",
27-
"platform": "ios",
28-
"request": "launch",
29-
"appRoot": "${workspaceRoot}",
30-
"sourceMaps": true,
31-
"diagnosticLogging": false,
32-
"emulator": true
33-
},
34-
{
35-
"name": "Attach on iOS Emulator",
36-
"type": "nativescript",
37-
"platform": "ios",
38-
"request": "attach",
39-
"appRoot": "${workspaceRoot}",
40-
"sourceMaps": true,
41-
"diagnosticLogging": false,
42-
"emulator": true
43-
},
44-
{
45-
"name": "Launch on Android Device",
46-
"type": "nativescript",
47-
"platform": "android",
48-
"request": "launch",
49-
"appRoot": "${workspaceRoot}",
50-
"sourceMaps": true,
51-
"diagnosticLogging": false,
52-
"emulator": false
53-
},
54-
{
55-
"name": "Launch on Android Emulator",
56-
"type": "nativescript",
57-
"platform": "android",
58-
"request": "launch",
59-
"appRoot": "${workspaceRoot}",
60-
"sourceMaps": true,
61-
"diagnosticLogging": false,
62-
"emulator": true
63-
},
64-
{
65-
"name": "Attach on Android Device",
66-
"type": "nativescript",
67-
"platform": "android",
68-
"request": "attach",
69-
"appRoot": "${workspaceRoot}",
70-
"sourceMaps": true,
71-
"diagnosticLogging": false,
72-
"emulator": false
73-
},
74-
{
75-
"name": "Attach on Android Emulator",
76-
"type": "nativescript",
77-
"platform": "android",
78-
"request": "attach",
79-
"appRoot": "${workspaceRoot}",
80-
"sourceMaps": true,
81-
"diagnosticLogging": false,
82-
"emulator": true
83-
}
84-
]
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"name": "Sync on iOS",
6+
"type": "nativescript",
7+
"platform": "ios",
8+
"request": "launch",
9+
"appRoot": "${workspaceRoot}",
10+
"sourceMaps": true,
11+
"diagnosticLogging": false,
12+
"emulator": false,
13+
"rebuild": false,
14+
"syncAllFiles": false
15+
},
16+
{
17+
"name": "Launch on iOS",
18+
"type": "nativescript",
19+
"platform": "ios",
20+
"request": "launch",
21+
"appRoot": "${workspaceRoot}",
22+
"sourceMaps": true,
23+
"diagnosticLogging": false,
24+
"emulator": false,
25+
"rebuild": true
26+
},
27+
{
28+
"name": "Attach on iOS",
29+
"type": "nativescript",
30+
"platform": "ios",
31+
"request": "attach",
32+
"appRoot": "${workspaceRoot}",
33+
"sourceMaps": true,
34+
"diagnosticLogging": false,
35+
"emulator": false
36+
},
37+
{
38+
"name": "Sync on Android",
39+
"type": "nativescript",
40+
"platform": "android",
41+
"request": "launch",
42+
"appRoot": "${workspaceRoot}",
43+
"sourceMaps": true,
44+
"diagnosticLogging": false,
45+
"emulator": false,
46+
"rebuild": false
47+
},
48+
{
49+
"name": "Launch on Android",
50+
"type": "nativescript",
51+
"platform": "android",
52+
"request": "launch",
53+
"appRoot": "${workspaceRoot}",
54+
"sourceMaps": true,
55+
"diagnosticLogging": false,
56+
"emulator": false,
57+
"rebuild": true
58+
},
59+
{
60+
"name": "Attach on Android",
61+
"type": "nativescript",
62+
"platform": "android",
63+
"request": "attach",
64+
"appRoot": "${workspaceRoot}",
65+
"sourceMaps": true,
66+
"diagnosticLogging": false,
67+
"emulator": false
68+
}
69+
]
8570
}

‎ng-sample/app/examples/router/login-test.ts

+64-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Component, OnInit, OnDestroy, Injectable } from "@angular/core";
2-
import { Router, CanActivate} from '@angular/router';
2+
import { Router, CanActivate, Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, ActivatedRoute, Params } from '@angular/router';
33
import { Observable } from "rxjs";
4-
import { RouterExtensions } from "nativescript-angular/router";
4+
import { RouterExtensions, PageRoute } from "nativescript-angular/router";
55
import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
6-
import { BehaviorSubject} from "rxjs";
6+
import { BehaviorSubject } from "rxjs";
7+
import { Page } from "ui/page";
78
import * as appSettings from "application-settings"
89

910
const USER_KEY = "user";
@@ -67,21 +68,64 @@ class LoginComponent {
6768
}
6869
}
6970

71+
72+
export interface ResolvedData {
73+
id: number
74+
}
75+
7076
@Component({
7177
selector: 'main',
7278
styleUrls: ["examples/router/styles.css"],
7379
template: `
7480
<StackLayout>
7581
<Label text="Main Page" class="title"></Label>
7682
<Label [text]="'Hello, ' + loginService.username" class="subtitle"></Label>
83+
<Label [text]="'data.id: ' + (data$ | async).id" class="subtitle"></Label>
84+
<Button text="go deeper" nsRouterLink="/inner" class="stretch"></Button>
7785
<Button text='logout' (tap)="logout()" class="stretch"></Button>
7886
</StackLayout>
7987
`
8088
})
8189
class MainComponent {
90+
private data$: Observable<ResolvedData>;
91+
constructor(private nav: RouterExtensions, private loginService: LoginService, private pageRoute: PageRoute) {
92+
this.data$ = this.pageRoute.activatedRoute
93+
.switchMap(activatedRoute => activatedRoute.data)
94+
.map(data => data[0]);
95+
}
96+
97+
logout() {
98+
this.loginService.logout().then((result) => {
99+
if (result) {
100+
this.nav.navigate(["/login"], { clearHistory: true });
101+
}
102+
});
103+
}
104+
105+
onReslove(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
106+
console.log("MainComponent.onReslove()")
107+
return true;
108+
}
109+
}
110+
111+
@Component({
112+
selector: 'inner',
113+
styleUrls: ["examples/router/styles.css"],
114+
template: `
115+
<StackLayout>
116+
<Label text="Inner Page" class="title"></Label>
117+
<Button text='go back' (tap)="back()" class="stretch"></Button>
118+
<Button text='logout' (tap)="logout()" class="stretch"></Button>
119+
</StackLayout>
120+
`
121+
})
122+
class InnerComponent {
82123
constructor(private nav: RouterExtensions, private loginService: LoginService) {
83124
}
84125

126+
back() {
127+
this.nav.backToPreviousPage();
128+
}
85129
logout() {
86130
this.loginService.logout().then((result) => {
87131
if (result) {
@@ -100,35 +144,48 @@ class AuthGuard implements CanActivate {
100144

101145
canActivate() {
102146
if (this.loginService.isLogged) {
103-
console.log("GUARD: authenticated");
147+
console.log("AuthGuard: authenticated");
104148
return true;
105149
}
106150
else {
107-
console.log("GUARD: redirecting to login");
151+
console.log("AuthGuard: redirecting to login");
108152
this.nav.navigate(["/login"]);
109153
return false;
110154
}
111155
}
112156
}
113157

158+
@Injectable()
159+
class ResolveGuard implements Resolve<ResolvedData> {
160+
static counter = 0;
161+
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ResolvedData> | Promise<ResolvedData> | ResolvedData {
162+
const result: ResolvedData = { id: ResolveGuard.counter++ }
163+
console.log(`ResolveGuard: Fteching new data. Result: ${JSON.stringify(result)} `);
164+
return result;
165+
}
166+
}
167+
114168
@Component({
115169
selector: 'navigation-test',
116170
template: `<page-router-outlet></page-router-outlet>`
117171
})
118172
export class LoginAppComponent {
119173
static routes = [
120174
{ path: "", redirectTo: "/main", terminal: true, pathMatch: "full" },
121-
{ path: "main", component: MainComponent, canActivate: [AuthGuard] },
175+
{ path: "main", component: MainComponent, canActivate: [AuthGuard], resolve: [ResolveGuard] },
176+
{ path: "inner", component: InnerComponent, canActivate: [AuthGuard] },
122177
{ path: "login", component: LoginComponent },
123178
]
124179

125180
static entries = [
181+
LoginComponent,
126182
MainComponent,
127-
LoginComponent
183+
InnerComponent
128184
]
129185

130186
static providers = [
131187
AuthGuard,
188+
ResolveGuard,
132189
LoginService,
133190
]
134191
}

‎tests/app/snippets/navigation/route-params.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// >> router-params-activated-route
2+
import { ActivatedRoute } from '@angular/router';
3+
class MyComponent {
4+
id: number;
5+
constructor(private route: ActivatedRoute) {
6+
this.route.params
7+
.forEach((params) => { this.id = +params['id']; });
8+
}
9+
}
10+
// << router-params-activated-route
11+
12+
13+
// >> router-params-page-route
14+
import { PageRoute } from "nativescript-angular/router";
15+
class MyPageComponent {
16+
id: number;
17+
constructor(private pageRoute: PageRoute) {
18+
// use switchMap to get the latest activatedRoute instance
19+
this.pageRoute.activatedRoute
20+
.switchMap(activatedRoute => activatedRoute.params)
21+
.forEach((params) => { this.id = +params['id']; });
22+
}
23+
}
24+
// << router-params-page-route

0 commit comments

Comments
 (0)