update

app.js

@@ -47,10 +47,10 @@ server.run = function (options) {
 
   apis.route('/checklogin')
     .post(function (req, res) {
-      res.json({logined: true, user: {id: 1, username: "liuzheng", name: "liuzheng"}})
+      res.json({logined: true, id: 1, username: "liuzheng", name: "liuzheng"})
     })
     .get(function (req, res) {
-      res.json({logined: true, user: {id: 1, username: "liuzheng", name: "liuzheng"}})
+      res.json({logined: 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;
@@ -41,19 +61,24 @@ export class User {
   last_login: string;
   groups: Array<string>;
   logined: boolean;
-}
-export class Group {
-  id: number;
-  name: string;
-  membercount: number;
-  comment: string;
-}
-
+} = {
+  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,25 +206,27 @@ export class AppService {
     }
   }
 
-  login(user: User) {
+  login() {
     this._logger.log('service.ts:AppService,login');
     DataStore.error['login'] = '';
-    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())
+    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 {
@@ -215,7 +242,7 @@ export class AppService {
           });
     } else {
       DataStore.error['login'] = '请检查用户名和密码';
-       return '请检查用户名和密码';
+      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

@@ -12,23 +12,23 @@ 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() {
-    this._logger.error(this._appService.login(this.user));
+    this._logger.error(this._appService.login());
   }
 
   ngOnInit() {
@@ -37,7 +37,7 @@ export class LoginComponent implements OnInit {
     // jQuery('nav').hide();
     const vm = this;
     window.onresize = function () {
-      if (!DataStore.logined) {
+      if (!User.logined) {
         vm.background();
       }
     };
@@ -49,7 +49,7 @@ export class LoginComponent implements OnInit {
   timer() {
     if (DataStore.windowsize[0] !== document.documentElement.clientWidth ||
       DataStore.windowsize[1] !== document.documentElement.clientHeight &&
-      !DataStore.logined) {
+      !User.logined) {
       jQuery(window).trigger('resize');
       DataStore.windowsize = [document.documentElement.clientWidth, document.documentElement.clientHeight];
     }

src/app/login.html

@@ -3,11 +3,11 @@
 <div class="form">
   <form (ngSubmit)="onSubmit()">
     <div class="from-group">
-      <input type="text" name="username" id="username" placeholder="Username" [(ngModel)]="user.username" required>
+      <input type="text" name="username" id="username" placeholder="Username" [(ngModel)]="User.username" required>
       <span class="fa fa-user-secret form-control-feedback"></span>
     </div>
     <div class="from-group">
-      <input type="password" name="password" id="password" placeholder="password" [(ngModel)]="user.password" required
+      <input type="password" name="password" id="password" placeholder="password" [(ngModel)]="User.password" required
              (ngEnter)="onSubmit()">
       <span class="fa fa-key form-control-feedback"></span>
     </div>

src/app/welcome.component.ts

@@ -11,8 +11,8 @@ import {AppService, DataStore, User} from './app.service';
 })
 
 export class WelcomeComponent {
-  DataStore = DataStore;
-
+  // 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! {{DataStore.user.username}}</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>