ing

src/app/app-store.module.ts

@@ -4,15 +4,19 @@ import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {
   StoreRouterConnectingModule,
   RouterStateSerializer,
+  RouterReducerState,
 } from '@ngrx/router-store';
 import { EffectsModule } from '@ngrx/effects';
 import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 
+
 import { environment } from '../environments/environment';
-import { AppState } from './app.state';
 
 import { SimpleRouterStateSerializer } from './commons/router/state/serializer/simple-router-state-serializer';
 
+export interface AppState {
+}
+
 export const reducers: ActionReducerMap<AppState> = {
 };
 
@@ -44,6 +48,7 @@ export const reducers: ActionReducerMap<AppState> = {
      */
     StoreDevtoolsModule.instrument({
       name: 'overFlow WebApp DevTools',
+      maxAge: 50,
       logOnly: environment.production,
     }),
     EffectsModule.forRoot([]),
@@ -58,4 +63,4 @@ export const reducers: ActionReducerMap<AppState> = {
   ],
 
 })
-export class AppReducerModule { }
+export class AppStoreModule { }

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
-import { AppReducerModule } from './app-reducer.module';
+import { AppStoreModule } from './app-store.module';
 import { MaterialModule } from './commons/ui/material/material.module';
 import { CovalentModule } from './commons/ui/covalent/covalent.module';
 
@@ -23,7 +23,7 @@ import { RPCService } from './commons/service/rpc.service';
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
-    AppReducerModule,
+    AppStoreModule,
     MaterialModule,
     CovalentModule,
     HttpClientModule,

src/app/app.state.ts

@@ -1,3 +0,0 @@
-export interface AppState {
-
-}

src/app/packages/member/component/signin.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+
+import * as AuthStore from '../store/auth';
 
 @Component({
   selector: 'of-member-signin',
@@ -17,6 +20,7 @@ export class SigninComponent implements OnInit {
 
   constructor(
     private router: Router,
+    private store: Store<AuthStore.State>,
     private formBuilder: FormBuilder,
   ) { }
 

src/app/packages/member/guard/auth.guard.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, async, inject } from '@angular/core/testing';
+
+import { AuthGuard } from './auth.guard';
+
+describe('AuthGuard', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthGuard]
+    });
+  });
+
+  it('should ...', inject([AuthGuard], (guard: AuthGuard) => {
+    expect(guard).toBeTruthy();
+  }));
+});

src/app/packages/member/guard/auth.guard.ts

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  CanActivateChild,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot
+} from '@angular/router';
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/take';
+import 'rxjs/add/operator/map';
+
+import * as AuthStore from '../store/auth';
+
+@Injectable()
+export class AuthGuard implements CanActivate, CanActivateChild {
+  constructor(
+    private store: Store<AuthStore.State>
+  ) { }
+
+  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    return this.store
+      .select(AuthStore.isSignin)
+      .map(isSignin => {
+        if (!isSignin) {
+          this.store.dispatch(new AuthStore.SigninRedirect());
+          return false;
+        }
+
+        return true;
+      })
+      .take(1);
+  }
+
+  canActivateChild(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
+    return this.store
+      .select(AuthStore.isSignin)
+      .map(isSignin => {
+        if (!isSignin) {
+          this.store.dispatch(new AuthStore.SigninRedirect());
+          return false;
+        }
+
+        return true;
+      })
+      .take(1);
+  }
+}

src/app/packages/member/member-store.module.ts

@@ -8,28 +8,15 @@ import {
 import { EffectsModule } from '@ngrx/effects';
 import { combineReducers, ActionReducer, ActionReducerMap, MetaReducer } from '@ngrx/store';
 
-import * as AuthStore from './store/auth';
-import * as SignupStore from './store/signup';
+import { State as MemberState } from './store/state';
+import { reducers as memberReducers } from './store/reducer';
+import { EFFECTS } from './store/effect';
 
-
-export interface State {
-  auth: AuthStore.State;
-  signup: SignupStore.Signup;
-}
-
-export const reducers = {
-  auth: AuthStore.reducer,
-  signup: SignupStore.reducer,
-};
-
-export const EFFECTS = [
-  AuthStore.Effects,
-  SignupStore.Effects,
-];
+import { MODULE } from './member.constant';
 
 @NgModule({
   imports: [
-    StoreModule.forFeature('', reducers),
+    StoreModule.forFeature(MODULE.name, memberReducers),
     EffectsModule.forFeature(EFFECTS),
   ],
 })

src/app/packages/member/member.constant.ts

@@ -0,0 +1,3 @@
+export const MODULE = {
+  name: 'Member'
+};

src/app/packages/member/member.module.ts

@@ -10,6 +10,7 @@ import { SigninComponent } from './component/signin.component';
 import { SignupComponent } from './component/signup.component';
 import { ResetPasswordComponent } from './component/reset-password.component';
 import { MemberService } from './service/member.service';
+import { AuthGuard } from './guard/auth.guard';
 
 import { MemberStoreModule } from './member-store.module';
 
@@ -32,6 +33,7 @@ export const COMPONENTS = [
   declarations: COMPONENTS,
   exports: COMPONENTS,
   providers: [
+    AuthGuard,
     MemberService,
   ],
 })

src/app/packages/member/store/auth/auth.action.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export enum ActionType {
   Signin = '[member.auth] Signin',
@@ -21,7 +21,7 @@ export class Signin implements Action {
 export class SigninSuccess implements Action {
   readonly type = ActionType.SigninSuccess;
 
-  constructor(public payload: { member: Member }) {}
+  constructor(public payload: Member) {}
 }
 
 export class SigninFailure implements Action {

src/app/packages/member/store/auth/auth.effect.ts

@@ -13,8 +13,8 @@ import 'rxjs/add/operator/exhaustMap';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
 
-import { Member } from '../model/member';
-import { MemberService } from '../service/member.service';
+import { Member } from '../../model/member';
+import { MemberService } from '../../service/member.service';
 
 import {
   Signin,
@@ -39,7 +39,7 @@ export class Effects {
     .exhaustMap(payload =>
       this.memberService
         .signin(payload.email, payload.password)
-        .map(member => new SigninSuccess({ member }))
+        .map(member => new SigninSuccess(member))
         .catch(error => of(new SigninFailure(error)))
     );
 

src/app/packages/member/store/auth/auth.reducer.ts

@@ -8,7 +8,7 @@ import {
   initialState,
 } from './auth.state';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export function reducer(state = initialState, action: Actions): State {
   switch (action.type) {
@@ -26,7 +26,7 @@ export function reducer(state = initialState, action: Actions): State {
         isSignin: true,
         error: null,
         isPending: false,
-        member: action.payload.member,
+        member: action.payload,
       };
     }
 

src/app/packages/member/store/auth/auth.state.ts

@@ -1,4 +1,4 @@
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export interface State {
   isSignin: boolean;

src/app/packages/member/store/effect.ts

@@ -0,0 +1,7 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export const EFFECTS = [
+  AuthStore.Effects,
+  SignupStore.Effects,
+];

src/app/packages/member/store/reducer.ts

@@ -0,0 +1,7 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export const reducers = {
+  auth: AuthStore.reducer,
+  signup: SignupStore.reducer,
+};

src/app/packages/member/store/signup/signup.action.ts

@@ -1,6 +1,6 @@
 import { Action } from '@ngrx/store';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export enum ActionType {
   Signup = '[member.signup] Signup',
@@ -11,13 +11,13 @@ export enum ActionType {
 export class Signup implements Action {
   readonly type = ActionType.Signup;
 
-  constructor(public payload: {member: Member}) {}
+  constructor(public payload: Member) {}
 }
 
 export class SignupSuccess implements Action {
   readonly type = ActionType.SignupSuccess;
 
-  constructor(public payload: { member: Member }) {}
+  constructor(public payload: Member) {}
 }
 
 export class SignupFailure implements Action {

src/app/packages/member/store/signup/signup.effect.ts

@@ -13,8 +13,8 @@ import 'rxjs/add/operator/exhaustMap';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/take';
 
-import { Member } from '../model/member';
-import { MemberService } from '../service/member.service';
+import { Member } from '../../model/member';
+import { MemberService } from '../../service/member.service';
 
 import {
   Signup,
@@ -36,10 +36,10 @@ export class Effects {
   signup$: Observable<Action> = this.actions$
     .ofType(ActionType.Signup)
     .map((action: Signup) => action.payload)
-    .exhaustMap(payload =>
+    .exhaustMap(member =>
       this.memberService
-        .signup(payload.member)
-        .map(member => new SignupSuccess({ member }))
+        .signup(member)
+        .map(_member => new SignupSuccess(_member))
         .catch(error => of(new SignupFailure(error)))
     );
 

src/app/packages/member/store/signup/signup.reducer.ts

@@ -8,7 +8,7 @@ import {
   initialState,
 } from './signup.state';
 
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export function reducer(state = initialState, action: Actions): State {
   switch (action.type) {
@@ -25,7 +25,7 @@ export function reducer(state = initialState, action: Actions): State {
         ...state,
         error: null,
         isPending: false,
-        member: action.payload.member,
+        member: action.payload,
       };
     }
 

src/app/packages/member/store/signup/signup.state.ts

@@ -1,4 +1,4 @@
-import { Member } from '../model/member';
+import { Member } from '../../model/member';
 
 export interface State {
   error: string | null;

src/app/packages/member/store/state.ts

@@ -0,0 +1,8 @@
+import * as AuthStore from './auth';
+import * as SignupStore from './signup';
+
+export interface State {
+  auth: AuthStore.State;
+  signup: SignupStore.Signup;
+}
+