Question

我正在开发一个使用Angular-7作为前端和Laravel-5.8作为后端的Web门户。另外，我正在使用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);
}

角度：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); }
      );
    }
  }

我还有一个来自Angular前端的名为 unauthorized-page.component.html 的页面。如果用户未被授权，我希望应用程序显示上面的未授权页面。

我该如何实现？

Answer 1

首先，您需要将未经授权的页面组件注册到路由中，以便在收到401响应后就可以导航至该路由。

HttpInterceptor可以使用catchError运算符来处理。

@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 }
]

角度-如果用户未经授权如何显示页面401

1 个答案: