update

src/app/app.service.ts

@@ -40,6 +40,7 @@ export class User {
   date_joined: string;
   last_login: string;
   groups: Array<string>;
+  logined:boolean;
 }
 export class Group {
   id: number;
@@ -183,7 +184,7 @@ export class AppService {
   login(user: User) {
     this._logger.log('service.ts:AppService,login');
     DataStore.error['login'] = '';
-    if (user.username.length > 0 && user.password.length > 6 && user.password.length < 100)
+    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 => {
@@ -193,25 +194,26 @@ export class AppService {
           err => {
             this._logger.error(err);
             DataStore.logined = false;
-            this._router.navigate(['Login']);
+            this._router.navigate(['login']);
             DataStore.error['login'] = '后端错误,请重试';
           },
           () => {
             if (DataStore.logined) {
-              if (jQuery.isEmptyObject(DataStore.Path))
-                this._router.navigate(['Index', '/']);
-              else
+              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']);
+              this._router.navigate(['login']);
             }
             // jQuery('angular2').show();
 
           });
-    else
+    } else {
       DataStore.error['login'] = '请检查用户名和密码';
-
+    }
   }
 
 //

src/app/footer.component.ts

@@ -5,13 +5,13 @@
 import {Component} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore} from './app.service';
+import {AppService, DataStore, User} from './app.service';
 
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.html',
-  // directives: [NgClass]
+  providers: [AppService]
 })
 
 

src/app/login.component.ts

@@ -4,7 +4,6 @@
 
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
-
 import {AppService, DataStore, User} from './app.service';
 import {Router} from '@angular/router';
 
@@ -21,7 +20,6 @@ declare let jQuery: any;
 export class LoginComponent implements OnInit {
   DataStore = DataStore;
 
-
   constructor(private _appService: AppService,
               private _logger: Logger,
               private _router: Router,
@@ -37,7 +35,7 @@ export class LoginComponent implements OnInit {
 
   ngOnInit() {
     jQuery('#form').fadeIn('slow');
-    this._router.navigate(['/login']);
+    // this._router.navigate(['login']);
     // jQuery('nav').hide();
     const vm = this;
     window.onresize = function () {

src/app/login.css

@@ -10,6 +10,7 @@ form {
   border-left-color: rgba(255, 255, 255, .4);
   border-bottom-color: rgba(60, 60, 60, .4);
   border-right-color: rgba(60, 60, 60, .4);
+  z-index: 9;
 }
 
 form input, form button {
@@ -83,4 +84,24 @@ form button[type=submit] {
   cursor: pointer;
 }
 
+canvas {
+  position: fixed;
+  top: 0;
+  z-index: 5;
+}
+
+.form {
+  z-index: 9;
+}
+
+.black {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 5;
+  background-color: #000000;
+}
+
 /* login form end */

src/app/login.html

-<div style="position: fixed;top: 0;left:0;width:100%;height:100%;z-index: 5;background-color: #000000;"></div>
-<canvas id="q" style="position:fixed;top: 0;z-index: 5;"></canvas>
-<div id="form" style="z-index: 9;display: none;">
-  <form (ngSubmit)="onSubmit()" style="z-index:9;">
+<div class="black"></div>
+<canvas id="q"></canvas>
+<div class="form">
+  <form (ngSubmit)="onSubmit()">
     <div class="from-group">
       <input type="text" name="username" id="username" placeholder="Username" [(ngModel)]="user.username" required>
       <span class="fa fa-user-secret form-control-feedback"></span>