update

app.js

@@ -38,15 +38,26 @@ server.run = function (options) {
 
   var app = express();
   var server = http.createServer(app);
+  var apis = express.Router();
 
   app.use("/", express.static(__dirname + '/dist/')); // 创建服务端
-    app.use("/socket.io/", express.static(__dirname + '/api/')); // 创建服务端
+  // app.use("/socket.io/", express.static(__dirname + '/api/')); // 创建服务端
   // let term.js handle req/res
   // app.use(terminal.middleware());
 
+  apis.route('/checklogin')
+    .post(function (req, res) {
+      res.json({logined: true, id: 1, username: "liuzheng", name: "liuzheng"})
+    })
+    .get(function (req, res) {
+      res.json({logined: false})
+    });
+
+
+  app.use("/api", apis);
   // let server listen on the port
   options = options || {};
-    server.listen(options.port || 8080);
+  server.listen(options.port || 3000);
 
   // let socket.io handle sockets
   io = io.listen(server, {log: false});
@@ -77,6 +88,6 @@ server.run = function (options) {
 };
 
 
-server.run({port: 8888});
+server.run({port: 3000});
 
-console.log('Please open your browser with http://127.0.0.1:8888');
+console.log('Please open your browser with http://127.0.0.1:3000');

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --proxy-config proxy.conf.json",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

proxy.conf.json

+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  },
+  "/socket.io/": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}

src/app/app.service.ts

@@ -27,7 +27,27 @@ import * as io from 'socket.io-client';
 import {Router} from '@angular/router';
 
 
-export class User {
+// export class User {
+//   id: number;
+//   name: string;
+//   username: string;
+//   password: string;
+//   phone: string;
+//   avatar: string;
+//   role: string;
+//   email: string;
+//   is_active: boolean;
+//   date_joined: string;
+//   last_login: string;
+//   groups: Array<string>;
+// }
+export class Group {
+  id: number;
+  name: string;
+  membercount: number;
+  comment: string;
+}
+export let User: {
   id: number;
   name: string;
   username: string;
@@ -40,20 +60,25 @@ export class User {
   date_joined: string;
   last_login: string;
   groups: Array<string>;
-  logined:boolean;
-}
-export class Group {
-  id: number;
-  name: string;
-  membercount: number;
-  comment: string;
-}
-
+  logined: boolean;
+} = {
+  id: 0,
+  name: 'nobody',
+  username: '',
+  password: '',
+  phone: '',
+  avatar: '',
+  role: '',
+  email: '',
+  is_active: false,
+  date_joined: '',
+  last_login: '',
+  groups: [],
+  logined: false,
+};
 export let DataStore: {
   socket: any;
-  user: User;
   Nav: Array<{}>;
-  logined: boolean;
   lastNavigationAttempt: string;
   route: Array<{}>;
   activenav: {};
@@ -70,9 +95,7 @@ export let DataStore: {
   windowsize: Array<number>;
 } = {
   socket: io.connect(),
-  user: new User,
   Nav: [{}],
-  logined: false,
   lastNavigationAttempt: '',
   route: [{}],
   activenav: {},
@@ -144,7 +167,7 @@ export class AppService {
     if (DataStore.Path) {
       if (DataStore.Path['name'] === 'FOF' || DataStore.Path['name'] === 'Forgot') {
       } else {
-        if (DataStore.logined) {
+        if (User.logined) {
           this._router.navigate([DataStore.Path['name']]);
           // jQuery('angular2').show();
         } else {
@@ -152,16 +175,18 @@ export class AppService {
             .map(res => res.json())
             .subscribe(
               data => {
-                DataStore.logined = data.logined;
-                DataStore.user = data.user;
+                User.name = data.name;
+                User.username = data.username;
+                User.logined = data.logined;
+                this._logger.debug(User);
               },
               err => {
                 this._logger.error(err);
-                DataStore.logined = false;
+                User.logined = false;
                 this._router.navigate(['login']);
               },
               () => {
-                if (DataStore.logined) {
+                if (User.logined) {
                   if (jQuery.isEmptyObject(DataStore.Path)) {
                     this._router.navigate(['']);
                   } else {
@@ -181,39 +206,44 @@ export class AppService {
     }
   }
 
-  login(user: User) {
+  login() {
     this._logger.log('service.ts:AppService,login');
     DataStore.error['login'] = '';
-    this._logger.log(user);
-    if (user.username.length > 0 && user.password.length > 6 && user.password.length < 100) {
-      this.http.post('/api/checklogin', JSON.stringify(user)).map(res => res.json())
+    this._logger.log(User);
+    if (User.username.length > 0 && User.password.length > 6 && User.password.length < 100) {
+      this.http.post('/api/checklogin', JSON.stringify(User)).map(res => res.json())
         .subscribe(
           data => {
-            DataStore.logined = data.logined;
-            DataStore.user = data.user;
+            User.logined = data.logined;
+            User.name = data.name;
+            User.username = data.username;
+            User.logined = data.logined;
           },
           err => {
             this._logger.error(err);
-            DataStore.logined = false;
+            User.logined = false;
             this._router.navigate(['login']);
             DataStore.error['login'] = '后端错误,请重试';
+            return '后端错误,请重试';
           },
           () => {
-            if (DataStore.logined) {
+            if (User.logined) {
               if (jQuery.isEmptyObject(DataStore.Path)) {
                 this._router.navigate(['welcome']);
               } else {
                 this._router.navigate([DataStore.Path['name'], DataStore.Path['res']]);
               }
             } else {
-              DataStore.error['login'] = '请检查用户名和密码';
               this._router.navigate(['login']);
+              DataStore.error['login'] = '请检查用户名和密码';
+              return '请检查用户名和密码';
             }
             // jQuery('angular2').show();
 
           });
     } else {
       DataStore.error['login'] = '请检查用户名和密码';
+      return '请检查用户名和密码';
     }
   }
 

src/app/footer.component.ts

@@ -16,7 +16,8 @@ import {AppService, DataStore, User} from './app.service';
 
 
 export class FooterComponent {
-  // DataStore = DataStore;
+  DataStore = DataStore;
+  User = User;
 
   constructor(private _appService: AppService,
               private _logger: Logger) {

src/app/footer.html

-<div class="container">
+<div class="container" *ngIf="User.logined">
   <footer>
     <p>© Company 2017</p>
   </footer>

src/app/login.component.ts

@@ -13,25 +13,24 @@ declare let jQuery: any;
   selector: 'app-root',
   templateUrl: './login.html',
   styleUrls: ['./login.css'],
-  providers: [AppService, User]
+  providers: [AppService]
 })
 // ToDo: ngEnter and redirect to default page
 
 export class LoginComponent implements OnInit {
   DataStore = DataStore;
+  User = User;
+  loginBotton = 'login to your account';
 
   constructor(private _appService: AppService,
-              private _logger: Logger,
-              public user: User) {
+              private _logger: Logger) {
     this._logger.log('login.ts:LoginComponent');
   }
 
 
   onSubmit(f: NgForm) {
     if (f.valid) {
-      this.user.username = f.value.email;
-      this.user.password = f.value.password;
-      this._appService.login(this.user);
+      this._appService.login();
     } else {
       this._logger.error("the form not valid")
     }

src/app/login.html

@@ -2,10 +2,10 @@
   <h2 class="form-signin-heading">Please sign in</h2>
   <label for="inputEmail" class="sr-only">Email address</label>
   <input type="email" id="inputEmail" class="form-control" placeholder="Email address"
-         name="email" ngModel #email="ngModel" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
+         name="email" [(ngModel)]="User.username" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
   <label for="inputPassword" class="sr-only">Password</label>
   <input type="password" id="inputPassword" class="form-control" placeholder="Password" required
-         name="password" ngModel #password="ngModel" (ngEnter)="onSubmit(f)">
+         name="password" [(ngModel)]="User.password" (ngEnter)="onSubmit(f)">
   <div class="checkbox">
     <label>
       <input type="checkbox" value="remember-me"> Remember me

src/app/welcome.component.ts

 /**
  * Created by liuzheng on 2017/8/31.
  */
-import {Component} from '@angular/core';
-import {AppService} from './app.service';
+import {Component, OnInit} from '@angular/core';
+import {AppService, DataStore, User} from './app.service';
 
 @Component({
   templateUrl: './welcome.html',
-  providers: [AppService],
+  providers: [AppService]
   // directives: [LeftbarComponent, TermComponent]
 })
 
 export class WelcomeComponent {
   // DataStore = DataStore;
+  User = User;
+
+  // DataStore = DataStore;
 }

src/app/welcome.html

-<div class="container">
+<div class="container" *ngIf="User.logined">
 
   <div class="row row-offcanvas row-offcanvas-right">
 
@@ -7,7 +7,7 @@
         <button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
       </p>
       <div class="jumbotron">
-        <h1>Hello, world!</h1>
+        <h1>Hello, world! {{User.username}}</h1>
         <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some
           responsive-range viewport sizes to see it in action.</p>
       </div>