Angular - Как отобразить страницу 401, если пользователь не авторизован

Question

Я разрабатываю веб-портал, используя Angular-7 в качестве Frontend и Laravel-5.8 в качестве Backend. Кроме того, я использую Laravel Spatie для управления ролями.

Laravel: ApiController

public function index(Request $request)
{
    if(!Auth::user()->hasPermissionTo('View ClientAdmin'))
        return response()->json([ "message" => 'User do not have permission'], 401);

    if($request->get('role')=='null' || $request->get('role')==''){
        if(($request->get('sort')!='null' && $request->get('sort')!='') && $request->get('search')){
                $user = $user->with('roles')->where("first_name", "LIKE", "%{$request->get('search')}%")->orWhere("last_name", "LIKE", "%{$request->get('search')}%")->orWhere("email", "LIKE", "%{$request->get('search')}%")->orderby($request->get('sort'), $request->get('order'))->paginate(10);
            } else if($request->get('sort')!='null' && $request->get('sort')!=''){
                $user = $user->with('roles')->orderby($request->get('sort'), $request->get('order'))->paginate(10);
            }
            else if($request->get('search'))
                $user = $user->with('roles')->where("first_name", "LIKE", "%{$request->get('search')}%")->orWhere("last_name", "LIKE", "%{$request->get('search')}%")->orWhere("email", "LIKE", "%{$request->get('search')}%")->paginate(10);
            else
                $user = $user->with('roles')->paginate(10);
    } else {
            $role = $request->get('role');
            if(($request->get('sort')!='null' && $request->get('sort')!='') && $request->get('search')){
                $user = $user->role($role)->with('roles')->where("first_name", "LIKE", "%{$request->get('search')}%")->orWhere("last_name", "LIKE", "%{$request->get('search')}%")->orWhere("email", "LIKE", "%{$request->get('search')}%")->orderby($request->get('sort'), $request->get('order'))->paginate(10);
            } else if($request->get('sort')!='null' && $request->get('sort')!=''){
                $user = $user->role($role)->with('roles')->orderby($request->get('sort'), $request->get('order'))->paginate(10);
            }
            else if($request->get('search'))
                $user = $user->role($role)->with('roles')->where("first_name", "LIKE", "%{$request->get('search')}%")->orWhere("last_name", "LIKE", "%{$request->get('search')}%")->orWhere("email", "LIKE", "%{$request->get('search')}%")->paginate(10);
            else
                $user = $user->role($role)->with('roles')->paginate(10);
    }
    return response()->json($user, 200);
}

Angular: testing.component.html

  ngOnInit() {

    console.log('isSuperAdmin: ' + this.roleManage.isSuperAdmin);
    this.isSuperAdmin = this.roleManage.isSuperAdmin;

    this.route.queryParams.subscribe(params => {
      if(params['role']){
        this.role = params['role'];
        this.User = this.role;

      } else {
        this.User = 'User';
        this.role = '';
      }
    })
    this.notify.clear();
    this.notify.info("Loading...", {timeout: 0});

    if(this.keyword) {
      this.api.get('clientadmins?search=' + this.keyword + '&page=' + this.pagination.page + '&sort=' + this.sortData.col + '&order=' + this.sortData.order + '&role=' + this.role, this.headers).subscribe(
        data => this.datahandler(data),
        error => { this.notify.clear(); console.log(error); this.notify.error(error.error.message); }
      );
    } else {
      this.api.get('clientadmins?page=' + this.pagination.page + '&sort=' + this.sortData.col + '&order=' + this.sortData.order + '&role=' + this.role, this.headers).subscribe(
        data => this.datahandler(data),
        error => { console.log(error); this.notify.error(error.error.message); }
      );
    }
  }

У меня также естьстраница с именем unauthorized-page.component.html из углового интерфейса. Если пользователь не авторизован, я хочу, чтобы приложение показывало неавторизованную страницу выше.

Как мне этого добиться?

Answer 1

Во-первых, вам необходимо зарегистрировать unauthorizedPageComponent в маршруте, чтобы вы могли перейти к нему, как только получите ответ 401.

Это может быть обработано HttpInterceptor с помощью catchError operator.

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    constructor(private router: Router) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req)
        .pipe(
            catchError( error => {
                if (error.status === 401) {
                    this.router.navigateByUrl(`/ROUTE_TO_UNAUTH_COMPONENT`);
                }
                return throw(err);
            })
        ); 
    }
}

и в вашем app.module.ts

providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }
]