Angular路由守卫报错Not all code paths return a value如何解决？

你遇到的Not all code paths return a value报错是TypeScript的类型校验提示，根源出在auth.guard.ts的map回调函数逻辑不完整：当user不存在时，你只调用了toastr.error提示，没有明确返回布尔值，不符合canActivate要求返回Observable<boolean>的约定。

1. 修改auth.guard.ts代码 #

在user不存在的逻辑分支末尾加上return false即可，修改后的完整代码如下：

import { map } from 'rxjs/operators';
import { AccountService } from './../_services/account.service';
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from 
'@angular/router';
import { Observable } from 'rxjs';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private accountService: AccountService, private toastr: ToastrService) { }

  canActivate(): Observable<boolean> {
    return this.accountService.currentUser$.pipe(
      map(user => {
        if (user) {
          return true;
        }
        this.toastr.error('Access Denied');
        // 新增缺失的返回值
        return false;
      })
    )
  }
}

2. 可选优化：统一路由守卫配置 #

你当前的路由配置里只有/members路径加了AuthGuard，/members/:id、/lists、/messages这些需要鉴权的路径还未配置守卫，如果需要统一管控可以把需要鉴权的路由归到同一个父路由下统一加守卫，避免重复配置：

const routes: Routes = [
  {path: '', component: HomeComponent},
  // 父路由统一加守卫，所有子路由自动继承
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    children: [
      {path: 'members', component: MemberListComponent},
      {path: 'members/:id', component: MemberDetailComponent},
      {path: 'lists', component: ListsComponent},
      {path: 'messages', component: MessagesComponent},
    ]
  },
  {path: '**', component: HomeComponent, pathMatch: 'full'}  
];

内容的提问来源于stack exchange，提问作者BRYAN MAKINI