修改登录，获取用户信息和注销的方法调用

index/src/app/components/header/header.component.ts

@@ -4,6 +4,7 @@ import {windowWidthChange} from '../../utils/util';
 import {ApiService} from '../../api/api.service';
 import {User} from '../../class/User';
 import {ComponentStateService} from '../../services/component-state.service';
+import {UserService} from '../../services/user.service';
 
 @Component({
     selector: 'app-header',
@@ -13,8 +14,8 @@ import {ComponentStateService} from '../../services/component-state.service';
 export class HeaderComponent implements OnInit {
 
     constructor(private router: Router,
-                private apiService: ApiService,
-                public componentStateService: ComponentStateService) {
+                public componentStateService: ComponentStateService,
+                private userService: UserService) {
         this.pageList = [
             {name: '首页', path: '/', icon: 'home', iconType: 'fill', show: true},
             {name: '分类', path: '/categories', icon: 'project', iconType: 'fill', show: true},
@@ -26,7 +27,7 @@ export class HeaderComponent implements OnInit {
             {name: '注册', path: '/registration', icon: 'user', iconType: 'outline', show: false}
         ];
 
-
+        this.getInfo();
         this.showList = window.innerWidth > this.mobileMaxWidth;
         this.changeLoginButtonV();
         // 监听宽度变化
@@ -41,7 +42,6 @@ export class HeaderComponent implements OnInit {
             } else {
                 this.size = 'large';
             }
-            this.getInfo();
         });
     }
 
@@ -116,27 +116,27 @@ export class HeaderComponent implements OnInit {
     }
 
     getInfo() {
-        this.apiService.userInfo().subscribe(data => {
-                this.userInfo = data.result;
-                this.changeLoginButtonV();
-            },
-            error => {
+        this.userService.watchUserInfo({
+                complete: () => null,
+                error: (err) => null,
+                next: data => {
+                    this.userInfo = data.result;
+                    this.changeLoginButtonV();
+                }
             }
         );
     }
 
     logout() {
-        this.apiService.logout().subscribe(data => {
-                location.reload();
-            },
-            error => {
-            }
-        );
-        this.userInfo = null;
+        this.userService.logout({
+            next: data => null,
+            error: err => null,
+            complete: () => null
+        });
     }
 
     toAdminPage() {
-        window.location.href = '/admin';
+        this.router.navigateByUrl('/admin')
     }
 }
 

index/src/app/view/admin/auth.guard.ts

@@ -2,21 +2,33 @@ import {Injectable} from '@angular/core';
 import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from '@angular/router';
 import {Observable} from 'rxjs';
 import {User} from '../../class/User';
+import {UserService} from '../../services/user.service';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AuthGuard implements CanActivate {
 
-    constructor() {
+    constructor(private userService: UserService) {
+        userService.watchUserInfo({
+            complete: () => null,
+            error: (err) => null,
+            next: data => {
+                this.userInfo = data.result
+                console.log(this.path);
+                // todo ：用户信息更新时 重新判断下path
+            }
+        })
     }
 
     userInfo: User;
+    private path: string;
 
     canActivate(
         next: ActivatedRouteSnapshot,
         state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
         const path = state.url.indexOf('?') > 0 ? state.url.substr(0, state.url.indexOf('?')) : state.url;
+        this.path = path
         switch (path) {
             case '/admin/article':
             case '/admin/category':

index/src/app/view/article/article.component.ts

@@ -7,6 +7,7 @@ import {User} from '../../class/User';
 import {CommentReq} from '../../class/Comment';
 import {PageList} from '../../class/HttpReqAndResp';
 import {Comment} from '../../class/Comment';
+import {UserService} from '../../services/user.service';
 
 declare var editormd;
 declare var $;
@@ -20,6 +21,7 @@ export class ArticleComponent implements OnInit {
 
     constructor(private activatedRoute: ActivatedRoute,
                 private apiService: ApiService,
+                private userService: UserService,
                 private titleService: Title,
                 private router: Router) {
         this.articleId = +activatedRoute.snapshot.paramMap.get('id');
@@ -41,10 +43,13 @@ export class ArticleComponent implements OnInit {
 
     ngOnInit() {
         this.toArticle(this.articleId);
-        this.apiService.userInfo().subscribe(data => {
-            this.user = data.result;
-            this.avatarImgUrl = data.result.avatarImgUrl;
-        }, error => {
+        this.userService.watchUserInfo({
+            complete: () => null,
+            error: (err) => null,
+            next: data => {
+                this.user = data.result;
+                this.avatarImgUrl = data.result.avatarImgUrl;
+            }
         });
         this.comment = new CommentReq(true);
     }

index/src/app/view/login-registration/components/login/login.component.ts

@@ -1,11 +1,10 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {NzMessageService} from 'ng-zorro-antd';
-import {ApiService} from '../../../../api/api.service';
 import {LoginReq} from '../../../../class/User';
-import {LocalStorageService} from '../../../../services/local-storage.service';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LoginRegistrationService} from '../../service/login-registration.service';
 import {Title} from '@angular/platform-browser';
+import {UserService} from '../../../../services/user.service';
 
 @Component({
     selector: 'c-login',
@@ -15,7 +14,7 @@ import {Title} from '@angular/platform-browser';
 export class LoginComponent implements OnInit {
 
     constructor(private nzMessageService: NzMessageService,
-                private apiService: ApiService,
+                private userService: UserService,
                 private activatedRoute: ActivatedRoute,
                 private router: Router,
                 private loginRegistrationService: LoginRegistrationService,
@@ -54,20 +53,24 @@ export class LoginComponent implements OnInit {
             return;
         }
 
-        this.apiService.login(this.loginReq).subscribe(
-            data => {
-                this.submitting = false;
-                this.nzMessageService.success('登录成功，欢迎你' + data.result.displayName);
-                this.loginStatus.emit(true);
-                if (this.url) {
-                    this.router.navigateByUrl(this.url);
-                } else {
-                    window.location.href = '/admin/';
+        this.userService.login(this.loginReq, {
+                complete: () => null,
+                error: (err) => {
+                    this.nzMessageService.error(err.msg);
+                    this.submitting = false;
+                    this.loginStatus.emit(false);
+                },
+                next: data => {
+                    this.submitting = false;
+                    this.nzMessageService.success('登录成功，欢迎你' + data.result.displayName);
+                    this.loginStatus.emit(true);
+                    if (this.url) {
+                        this.router.navigateByUrl(this.url);
+                    } else {
+                        // window.location.href = '/admin/';
+                        this.router.navigateByUrl('/admin')
+                    }
                 }
-            }, error => {
-                this.nzMessageService.error(error.msg);
-                this.submitting = false;
-                this.loginStatus.emit(false);
             }
         );
     }

index/src/app/view/write/write.component.ts

@@ -7,6 +7,7 @@ import {NzMessageService} from 'ng-zorro-antd';
 import {User} from '../../class/User';
 import {Tag} from '../../class/Tag';
 import {Title} from '@angular/platform-browser';
+import {UserService} from '../../services/user.service';
 
 @Component({
     selector: 'view-write',
@@ -18,6 +19,7 @@ export class WriteComponent implements OnInit {
     constructor(private router: Router,
                 private activatedRoute: ActivatedRoute,
                 private apiService: ApiService,
+                private userService: UserService,
                 private message: NzMessageService,
                 private titleService: Title) {
         this.titleService.setTitle('小海博客 | 创作');
@@ -37,6 +39,8 @@ export class WriteComponent implements OnInit {
     // 发布新文章时，文章相同会被拦回 此处判断一下
     title: string;
 
+    private lastShowTime: number;
+
     // 同步属性内容
     syncModel(str): void {
         this.article.mdContent = str;
@@ -54,17 +58,23 @@ export class WriteComponent implements OnInit {
         }
         this.setSuitableHeight();
         // 用户权限判断
-        this.apiService.userInfo().subscribe({
-            next: data => {
-                this.userInfo = data.result;
-                if (data.result.role !== 'admin') {
-                    this.message.info('你暂时无发布文章的权限,所写文章将暂存在本地');
+        this.userService.watchUserInfo({
+            complete: () => null,
+            error: (err) => {
+                if (!this.lastShowTime || Date.now() - this.lastShowTime > 1000) {
+                    this.message.info('你暂时还没有登录，请点击右上角登录后开始创作');
+                    this.lastShowTime = Date.now();
                 }
             },
-            error: e => {
-                this.message.info('你暂时还没有登录，请点击右上角登录后开始创作');
+            next: data => {
+                this.userInfo = data.result;
+                if ((!data.result || data.result.role !== 'admin')
+                    && (!this.lastShowTime || Date.now() - this.lastShowTime > 1000)) {
+                    this.message.info('你暂时无发布文章的权限,所写文章将暂存在本地');
+                }
             }
-        });
+        })
+        ;
         this.apiService.tagsNac().subscribe(data => {
             this.tagNacList = data.result;
             this.tagNacList.sort((a, b) => a.name.length - b.name.length);