修改路由守卫

index/src/app/view/admin/admin.component.html

@@ -38,15 +38,15 @@
                 <span>分类标签管理</span>
             </li>
 
-<!--            <li nz-menu-item routerLink="/admin/category" *ngIf="user.role=='admin'">-->
+            <!--            <li nz-menu-item routerLink="/admin/category" *ngIf="user.role=='admin'">-->
-<!--                <i nz-icon nzType="appstore" nzTheme="outline"></i>-->
+            <!--                <i nz-icon nzType="appstore" nzTheme="outline"></i>-->
-<!--                <span>分类管理</span>-->
+            <!--                <span>分类管理</span>-->
-<!--            </li>-->
+            <!--            </li>-->
 
-            <li nz-menu-item routerLink="/admin/userInfo">
+            <!--            <li nz-menu-item routerLink="/admin/userInfo">-->
-                <i nz-icon nzType="idcard" nzTheme="outline"></i>
+            <!--                <i nz-icon nzType="idcard" nzTheme="outline"></i>-->
-                <span>修改信息</span>
+            <!--                <span>修改信息</span>-->
-            </li>
+            <!--            </li>-->
 
             <li nz-menu-item routerLink="/admin/user" *ngIf="user.role=='admin'">
                 <i nz-icon nzType="user" nzTheme="outline"></i>
@@ -89,7 +89,7 @@
     </nz-layout>
 </nz-layout>
 <nz-drawer [nzClosable]="false" [nzVisible]="infoDrawerVisible" nzPlacement="right"
-           [nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false">
+           [nzTitle]="sayHelloTemp" (nzOnClose)="infoDrawerVisible = false" >
     <p>您最近一次登录是在:</p>
     <p>{{user.recentlyLandedDate}}</p>
     <br><br>

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

@@ -13,6 +13,16 @@ import {ApiService} from '../../api/api.service';
 export class AdminComponent implements OnInit {
 
     constructor(public gUserService: GlobalUserService, private apiService: ApiService, private messageService: NzMessageService) {
+        this.gUserService.watchUserInfo({
+                complete: () => null,
+                error: (err) => null,
+                next: data => {
+                    console.log('更新user')
+                    this.user = data.result
+                    this.initHelloWords()
+                }
+            }
+        )
     }
 
     user: User;
@@ -25,21 +35,11 @@ export class AdminComponent implements OnInit {
     showInfoDrawer = () => this.infoDrawerVisible = !this.infoDrawerVisible;
 
     ngOnInit(): void {
-        this.gUserService.watchUserInfo({
-                complete: () => null,
-                error: (err) => null,
-                next: data => {
-                    console.log('更新user')
-                    this.user = data.result
-                }
-            }
-        )
         this.editInfoFormGroup = new FormGroup({
             desc: new FormControl(),
             displayName: new FormControl(),
             email: new FormControl({value: null, disabled: true})
         });
-        this.initHelloWords()
     }
 
     private initHelloWords() {

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

@@ -1,6 +1,6 @@
 import {Injectable} from '@angular/core';
 import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} from '@angular/router';
-import {Observable} from 'rxjs';
+import {Observable, Observer} from 'rxjs';
 import {User} from '../../class/User';
 import {GlobalUserService} from '../../services/global-user.service';
 
@@ -10,48 +10,58 @@ import {GlobalUserService} from '../../services/global-user.service';
 export class AuthGuard implements CanActivate {
 
     constructor(private userService: GlobalUserService, private router: Router) {
-        userService.watchUserInfo({
+        this.userService.refreshUserInfo();
-            complete: () => null,
-            error: (err) => {
-                // 请求重复
-                console.log(err);
-                if (err.code !== -1) {
-                    this.userInfo = null;
-                    this.router.navigateByUrl(this.loginPath);
-                }
-            },
-            next: data => {
-                this.userInfo = data.result
-            }
-        })
     }
 
     userInfo: User;
     private path: string;
     private readonly loginPath: string = '/user/login';
+    private observable: Observable<boolean>;
 
-    canActivate(
+    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
-        next: ActivatedRouteSnapshot,
+        this.path = state.url.indexOf('?') > 0 ? state.url.substr(0, state.url.indexOf('?')) : state.url;
-        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+        this.observable = new Observable<boolean>(observer => {
-        const path = state.url.indexOf('?') > 0 ? state.url.substr(0, state.url.indexOf('?')) : state.url;
+            if (!this.userInfo) {
-        this.path = path
+                this.watchUserInfo(observer);
-        if (path.split('/')[1] === 'admin' && !this.userInfo) {
+            } else {
-            this.router.navigateByUrl(this.loginPath);
+                this.checkPath(observer);
-            return false;
             }
-        switch (path) {
+        });
+        return this.observable;
+    }
+
+    watchUserInfo(observer: Observer<boolean>) {
+        this.userService.watchUserInfo({
+            complete: null,
+            error: (err) => {
+                // 请求重复
+                if (err.code !== -1) {
+                    observer.next(false);
+                    this.router.navigateByUrl(this.loginPath);
+                }
+            },
+            next: data => {
+                this.userInfo = data.result;
+                this.checkPath(observer);
+            }
+        })
+    }
+
+
+    checkPath(observer: Observer<boolean>) {
+        switch (this.path) {
             case '/admin/article':
-            case '/admin/category':
             case '/admin/link':
             case '/admin/tag':
             case '/admin/update':
             case '/admin/user':
             case '/admin/visitor':
                 if (this.userInfo.role !== 'admin') {
-                    return false;
+                    observer.next(false)
+                    return;
                 }
         }
-        return true;
+        observer.next(true);
     }
 
 }