cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): add support for CanActivate guard

Browse Source
This commit is contained in:
vsavkin
2016-06-01 14:32:15 -07:00
parent 99f7404d8b
commit c5cca8e098
10 changed files with 249 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
modules/@angular/router/src/common_router_providers.ts
View File

@ -3,7 +3,7 @@ import { UrlSerializer, DefaultUrlSerializer } from './url_serializer';
import { ActivatedRoute } from './router_state';
import { Router } from './router';
import { RouterConfig } from './config';
import { ComponentResolver, ApplicationRef} from '@angular/core';
import { ComponentResolver, ApplicationRef, Injector } from '@angular/core';
import { LocationStrategy, PathLocationStrategy, Location } from '@angular/common';
/**
@ -32,17 +32,17 @@ export function provideRouter(config: RouterConfig):any[] {
{
provide: Router,
useFactory: (ref, resolver, urlSerializer, outletMap, location) => {
useFactory: (ref, resolver, urlSerializer, outletMap, location, injector) => {
if (ref.componentTypes.length == 0) {
throw new Error("Bootstrap at least one component before injecting Router.");
}
const componentType = ref.componentTypes[0];
const r = new Router(componentType, resolver, urlSerializer, outletMap, location);
const r = new Router(componentType, resolver, urlSerializer, outletMap, location, injector);
r.resetConfig(config);
ref.registerDisposeListener(() => r.dispose());
return r;
},
deps: [ApplicationRef, ComponentResolver, UrlSerializer, RouterOutletMap, Location]
deps: [ApplicationRef, ComponentResolver, UrlSerializer, RouterOutletMap, Location, Injector]
},
RouterOutletMap,

1
modules/@angular/router/src/config.ts
View File

@ -7,5 +7,6 @@ export interface Route {
path?: string;
component: Type | string;
outlet?: string;
canActivate?: any[],
children?: Route[];
}

22
modules/@angular/router/src/create_router_state.ts
View File

@ -2,17 +2,19 @@ import { RouterStateCandidate, ActivatedRouteCandidate, RouterState, ActivatedRo
import { TreeNode } from './utils/tree';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
export function createRouterState(curr: RouterStateCandidate, prev: RouterStateCandidate, prevState: RouterState): RouterState {
const root = createNode(curr._root, prev ? prev._root : null, prevState ? prevState._root : null);
export function createRouterState(curr: RouterStateCandidate, prevState: RouterState): RouterState {
const root = createNode(curr._root, prevState ? prevState._root : null);
const queryParams = prevState ? prevState.queryParams : new BehaviorSubject(curr.queryParams);
const fragment = prevState ? prevState.fragment : new BehaviorSubject(curr.fragment);
return new RouterState(root, queryParams, fragment);
return new RouterState(root, queryParams, fragment, curr);
}
function createNode(curr:TreeNode<ActivatedRouteCandidate>, prev?:TreeNode<ActivatedRouteCandidate>, prevState?:TreeNode<ActivatedRoute>):TreeNode<ActivatedRoute> {
if (prev && equalRouteCandidates(prev.value, curr.value)) {
function createNode(curr:TreeNode<ActivatedRouteCandidate>, prevState?:TreeNode<ActivatedRoute>):TreeNode<ActivatedRoute> {
if (prevState && equalRouteCandidates(prevState.value.candidate, curr.value)) {
const value = prevState.value;
const children = createOrReuseChildren(curr, prev, prevState);
value.candidate = curr.value;
const children = createOrReuseChildren(curr, prevState);
return new TreeNode<ActivatedRoute>(value, children);
} else {
@ -22,11 +24,11 @@ function createNode(curr:TreeNode<ActivatedRouteCandidate>, prev?:TreeNode<Activ
}
}
function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prev:TreeNode<ActivatedRouteCandidate>, prevState:TreeNode<ActivatedRoute>) {
function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prevState:TreeNode<ActivatedRoute>) {
return curr.children.map(child => {
const index = prev.children.findIndex(p => equalRouteCandidates(p.value, child.value));
const index = prevState.children.findIndex(p => equalRouteCandidates(p.value.candidate, child.value));
if (index >= 0) {
return createNode(child, prev.children[index], prevState.children[index]);
return createNode(child, prevState.children[index]);
} else {
return createNode(child);
}
@ -34,7 +36,7 @@ function createOrReuseChildren(curr:TreeNode<ActivatedRouteCandidate>, prev:Tree
}
function createActivatedRoute(c:ActivatedRouteCandidate) {
return new ActivatedRoute(new BehaviorSubject(c.urlSegments), new BehaviorSubject(c.params), c.outlet, c.component);
return new ActivatedRoute(new BehaviorSubject(c.urlSegments), new BehaviorSubject(c.params), c.outlet, c.component, c);
}
function equalRouteCandidates(a: ActivatedRouteCandidate, b: ActivatedRouteCandidate): boolean {

4
modules/@angular/router/src/directives/router_outlet.ts
View File

@ -1,4 +1,4 @@
import {Directive, ViewContainerRef, Attribute, ComponentRef, ComponentFactory, ResolvedReflectiveProvider, ReflectiveInjector} from '@angular/core';
import {Injector, Directive, ViewContainerRef, Attribute, ComponentRef, ComponentFactory, ResolvedReflectiveProvider, ReflectiveInjector} from '@angular/core';
import {RouterOutletMap} from '../router_outlet_map';
import {PRIMARY_OUTLET} from '../shared';
@ -8,7 +8,7 @@ export class RouterOutlet {
public outletMap:RouterOutletMap;
constructor(parentOutletMap:RouterOutletMap, private location:ViewContainerRef,
@Attribute('name') name:string) {
@Attribute('name') name:string, public injector: Injector) {
parentOutletMap.registerOutlet(name ? name : PRIMARY_OUTLET, this);
}

137
modules/@angular/router/src/router.ts
View File

@ -1,4 +1,4 @@
import { ComponentResolver, ReflectiveInjector, Type } from '@angular/core';
import { ComponentResolver, ReflectiveInjector, Type, Injector } from '@angular/core';
import { Location } from '@angular/common';
import { UrlSerializer } from './url_serializer';
import { RouterOutletMap } from './router_outlet_map';
@ -8,15 +8,18 @@ import { createRouterState } from './create_router_state';
import { TreeNode } from './utils/tree';
import { UrlTree, createEmptyUrlTree } from './url_tree';
import { PRIMARY_OUTLET, Params } from './shared';
import { createEmptyState, createEmptyStateCandidate, RouterState, RouterStateCandidate, ActivatedRoute, ActivatedRouteCandidate} from './router_state';
import { createEmptyState, RouterState, RouterStateCandidate, ActivatedRoute, ActivatedRouteCandidate} from './router_state';
import { RouterConfig } from './config';
import { RouterOutlet } from './directives/router_outlet';
import { createUrlTree } from './create_url_tree';
import { forEach } from './utils/collection';
import { forEach, and, shallowEqual } from './utils/collection';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/scan';
import 'rxjs/add/operator/mergeMap';
import {of} from 'rxjs/observable/of';
import {forkJoin} from 'rxjs/observable/forkJoin';
export interface NavigationExtras { relativeTo?: ActivatedRoute; queryParameters?: Params; fragment?: string; }
@ -26,17 +29,15 @@ export interface NavigationExtras { relativeTo?: ActivatedRoute; queryParameters
export class Router {
private currentUrlTree: UrlTree;
private currentRouterState: RouterState;
private currentRouterStateCandidate: RouterStateCandidate;
private config: RouterConfig;
private locationSubscription: Subscription;
/**
* @internal
*/
constructor(private rootComponentType:Type, private resolver: ComponentResolver, private urlSerializer: UrlSerializer, private outletMap: RouterOutletMap, private location: Location) {
constructor(private rootComponentType:Type, private resolver: ComponentResolver, private urlSerializer: UrlSerializer, private outletMap: RouterOutletMap, private location: Location, private injector: Injector) {
this.currentUrlTree = createEmptyUrlTree();
this.currentRouterState = createEmptyState(rootComponentType);
this.currentRouterStateCandidate = createEmptyStateCandidate(rootComponentType);
this.setUpLocationChangeListener();
this.navigateByUrl(this.location.path());
}
@ -159,26 +160,27 @@ export class Router {
});
}
private runNavigate(url:UrlTree, pop?:boolean):Observable<void> {
let candidate;
private runNavigate(url:UrlTree, pop?:boolean):Observable<any> {
let state;
const r = recognize(this.rootComponentType, this.config, url).mergeMap((newRouterStateCandidate) => {
return resolve(this.resolver, newRouterStateCandidate);
}).map((routerStateCandidate) => {
candidate = routerStateCandidate;
return createRouterState(routerStateCandidate, this.currentRouterStateCandidate, this.currentRouterState);
return createRouterState(routerStateCandidate, this.currentRouterState);
}).map((newState:RouterState) => {
state = newState;
}).mergeMap(_ => {
return new GuardChecks(state.candidate, this.currentRouterState.candidate, this.injector).check(this.outletMap);
});
r.subscribe((_) => {
new ActivateRoutes(state, this.currentRouterState, candidate).activate(this.outletMap);
r.subscribe((shouldActivate) => {
if (!shouldActivate) return;
new ActivateRoutes(state, this.currentRouterState).activate(this.outletMap);
this.currentUrlTree = url;
this.currentRouterState = state;
this.currentRouterStateCandidate = candidate;
if (!pop) {
this.location.go(this.urlSerializer.serialize(url));
@ -188,59 +190,104 @@ export class Router {
}
}
class GuardChecks {
private checks = [];
constructor(private future: RouterStateCandidate, private curr: RouterStateCandidate, private injector: Injector) {}
check(parentOutletMap: RouterOutletMap): Observable<boolean> {
const futureRoot = this.future._root;
const currRoot = this.curr ? this.curr._root : null;
this.traverseChildRoutes(futureRoot, currRoot, parentOutletMap);
if (this.checks.length === 0) return of(true);
return forkJoin(this.checks.map(s => this.runCanActivate(s))).map(and);
}
private traverseChildRoutes(futureNode: TreeNode<ActivatedRouteCandidate>,
currNode: TreeNode<ActivatedRouteCandidate> | null,
outletMap: RouterOutletMap): void {
const prevChildren = nodeChildrenAsMap(currNode);
futureNode.children.forEach(c => {
this.traverseRoutes(c, prevChildren[c.value.outlet], outletMap);
delete prevChildren[c.value.outlet];
});
forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k]));
}
traverseRoutes(futureNode: TreeNode<ActivatedRouteCandidate>, currNode: TreeNode<ActivatedRouteCandidate> | null,
parentOutletMap: RouterOutletMap): void {
const future = futureNode.value;
const curr = currNode ? currNode.value : null;
if (future === curr) {
if (!shallowEqual(future.params, curr.params)) {
this.checks.push(future);
}
this.traverseChildRoutes(futureNode, currNode, null);
} else {
this.deactivateOutletAndItChildren(null);
this.checks.push(future);
this.traverseChildRoutes(futureNode, null, null);
}
}
private deactivateOutletAndItChildren(outlet: RouterOutlet): void {}
private runCanActivate(future: ActivatedRouteCandidate): Observable<boolean> {
const canActivate = future._routeConfig ? future._routeConfig.canActivate : null;
if (!canActivate || canActivate.length === 0) return of(true);
return forkJoin(canActivate.map(c => {
const guard = this.injector.get(c);
return of(guard(future, this.future));
})).map(and);
}
}
class ActivateRoutes {
constructor(private futureState: RouterState, private currState: RouterState,
private futureStateCandidate: RouterStateCandidate) {}
constructor(private futureState: RouterState, private currState: RouterState) {}
activate(parentOutletMap: RouterOutletMap):void {
const futureRoot = this.futureState._root;
const currRoot = this.currState ? this.currState._root : null;
const futureCandidateRoot = this.futureStateCandidate._root;
this.activateChildRoutes(futureRoot, currRoot, futureCandidateRoot, parentOutletMap);
pushQueryParamsAndFragment(this.futureState);
this.activateChildRoutes(futureRoot, currRoot, parentOutletMap);
}
private activateChildRoutes(futureNode: TreeNode<ActivatedRoute>,
currNode: TreeNode<ActivatedRoute> | null,
futureCandidateNode: TreeNode<ActivatedRouteCandidate>,
outletMap: RouterOutletMap): void {
const prevChildren = nodeChildrenAsMap(currNode);
for (let i = 0; i < futureNode.children.length; ++i) {
const c = futureNode.children[i];
const cc = futureCandidateNode.children[i];
this.activateRoutes(c, prevChildren[c.value.outlet], cc, outletMap);
futureNode.children.forEach(c => {
this.activateRoutes(c, prevChildren[c.value.outlet], outletMap);
delete prevChildren[c.value.outlet];
}
});
forEach(prevChildren, (v, k) => this.deactivateOutletAndItChildren(outletMap._outlets[k]));
}
activateRoutes(futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute>,
futureCandidateNode: TreeNode<ActivatedRouteCandidate>,
activateRoutes(futureNode: TreeNode<ActivatedRoute>, currNode: TreeNode<ActivatedRoute> | null,
parentOutletMap: RouterOutletMap): void {
const future = futureNode.value;
const futureCandidate = futureCandidateNode.value;
const curr = currNode ? currNode.value : null;
const outlet = getOutlet(parentOutletMap, futureNode.value);
if (future === curr) {
pushValues(future, futureCandidate);
this.activateChildRoutes(futureNode, currNode, futureCandidateNode, outlet.outletMap);
pushValues(future);
this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
} else {
this.deactivateOutletAndItChildren(outlet);
const outletMap = new RouterOutletMap();
this.activateNewRoutes(outletMap, future, futureCandidate, outlet);
this.activateChildRoutes(futureNode, currNode, futureCandidateNode, outletMap);
this.activateNewRoutes(outletMap, future, outlet);
this.activateChildRoutes(futureNode, null, outletMap);
}
}
private activateNewRoutes(outletMap: RouterOutletMap, future: ActivatedRoute,
futureCandidate: ActivatedRouteCandidate, outlet: RouterOutlet): void {
private activateNewRoutes(outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): void {
const resolved = ReflectiveInjector.resolve([
{provide: ActivatedRoute, useValue: future},
{provide: RouterOutletMap, useValue: outletMap}
]);
outlet.activate(futureCandidate._resolvedComponentFactory, resolved, outletMap);
pushValues(future, futureCandidate);
outlet.activate(future.candidate._resolvedComponentFactory, resolved, outletMap);
pushValues(future);
}
private deactivateOutletAndItChildren(outlet: RouterOutlet): void {
@ -251,12 +298,24 @@ class ActivateRoutes {
}
}
function pushValues(route: ActivatedRoute, candidate: ActivatedRouteCandidate): void {
(<any>route.urlSegments).next(candidate.urlSegments);
(<any>route.params).next(candidate.params);
function pushValues(route: ActivatedRoute): void {
if (!shallowEqual(route.candidate.params, (<any>route.params).value)) {
(<any>route.urlSegments).next(route.candidate.urlSegments);
(<any>route.params).next(route.candidate.params);
}
}
function nodeChildrenAsMap(node: TreeNode<ActivatedRoute>|null) {
function pushQueryParamsAndFragment(state: RouterState): void {
if (!shallowEqual(state.candidate.queryParams, (<any>state.queryParams).value)) {
(<any>state.queryParams).next(state.candidate.queryParams);
}
if (state.candidate.fragment !== (<any>state.fragment).value) {
(<any>state.fragment).next(state.candidate.fragment);
}
}
function nodeChildrenAsMap(node: TreeNode<any>|null) {
return node ?
node.children.reduce(
(m, c) => {

13
modules/@angular/router/src/router_state.ts
View File

@ -22,21 +22,22 @@ import { Type, ComponentFactory } from '@angular/core';
* ```
*/
export class RouterState extends Tree<ActivatedRoute> {
constructor(root: TreeNode<ActivatedRoute>, public queryParams: Observable<Params>, public fragment: Observable<string>) {
constructor(root: TreeNode<ActivatedRoute>, public queryParams: Observable<Params>, public fragment: Observable<string>, public candidate: RouterStateCandidate) {
super(root);
}
}
export function createEmptyState(rootComponent: Type): RouterState {
const candidate = createEmptyStateCandidate(rootComponent);
const emptyUrl = new BehaviorSubject([new UrlSegment("", {}, PRIMARY_OUTLET)]);
const emptyParams = new BehaviorSubject({});
const emptyQueryParams = new BehaviorSubject({});
const fragment = new BehaviorSubject("");
const activated = new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent);
return new RouterState(new TreeNode<ActivatedRoute>(activated, []), emptyQueryParams, fragment);
const activated = new ActivatedRoute(emptyUrl, emptyParams, PRIMARY_OUTLET, rootComponent, candidate.root);
return new RouterState(new TreeNode<ActivatedRoute>(activated, []), emptyQueryParams, fragment, candidate);
}
export function createEmptyStateCandidate(rootComponent: Type): RouterStateCandidate {
function createEmptyStateCandidate(rootComponent: Type): RouterStateCandidate {
const emptyUrl = [new UrlSegment("", {}, PRIMARY_OUTLET)];
const emptyParams = {};
const emptyQueryParams = {};
@ -62,7 +63,9 @@ export class ActivatedRoute {
constructor(public urlSegments: Observable<UrlSegment[]>,
public params: Observable<Params>,
public outlet: string,
public component: Type | string) {}
public component: Type | string,
public candidate: ActivatedRouteCandidate
) {}
}
export class ActivatedRouteCandidate {

4
modules/@angular/router/src/utils/collection.ts
View File

@ -28,6 +28,10 @@ export function first<T>(a: T[]): T | null {
return a.length > 0 ? a[0] : null;
}
export function and(bools: boolean[]): boolean {
return bools.reduce((a,b) => a && b, true);
}
export function merge<V>(m1: {[key: string]: V}, m2: {[key: string]: V}): {[key: string]: V} {
var m: {[key: string]: V} = {};