Angular 和 Laravel - 根据登录名和用户 ID 显示并保存到数据库中

我正在使用 Laravel Endpoint 和 Angular7 Frontend 开发结果管理应用程序。当我保存到数据库中时，我想保存登录/用户 ID。此外，它将根据登录 ID 显示数据。也就是说，如果 UserId 为 1（用户是 Admin），它将显示所有数据，但如果用户 Id 是除 1 之外的任何其他数字，它将根据表中的登录名/用户 ID 显示数据

我开发了这些表：

1. 用户：id、用户名、电子邮件、密码
2. 考试：id、exam_name、user_id
3. 结果：id、exam_id、user_id、分数。

此外，我还开发了 Laravel Endpoint 和 Angular7 Frontend。

Laravel 端点：控制器

    public function login(Request $request)
    {
        $credentials = $request->json()->all();

        try
        {
            if(! $token = JWTAuth::attempt($credentials))
            {
                return response()->json(['error' => 'invalid_credentials'], 400);
            } else {
                // Generate token from user 
                $token = JWTAuth::attempt($credentials);
                //return response()->json(compact('token'));
                return response()->json(                [
                    'access_token' => $token,
                    'token_type' => 'bearer'
                ]   );

            }
        }
        catch(JWTException $e)
        {
            return response()->json(['error' => 'could_not_create_token'], 500);
        }
    } 

考试：Laravel EndPoint

    public function index()
    {
        $exams = Exam::all();
        return response()->json($exams);
    }

    public function store(Request $request)
    {
        $request->validate([
            'exam_name' => 'required'
        ]);

        $exam = Exam::create($request->all());

        return response()->json([
            'message' => 'Great success! New Exam created',
            'exam => $exam
        ]);
    }

    public function show(Exam $exam)
    {
        return $exam;
    }

接口

Route::get('/exams', 'ExamController@index')->name('exams.index');

Route::post('/exams', 'ExamController@store')->name('exams.store');

Route::get('/exams/{exam}', 'ExamController@show')->name('exams.show');

角度：exam.service.ts

const apiUrl = "http://localhost/schoolbackend/public/api/exams";

  getExams (): Observable<Exam[]> {
    return this.http.get<Exam[]>(apiUrl)
      .pipe(
        tap(exams => console.log('Fetch exams')),
        catchError(this.handleError('getExams', []))
      );
  }

  addExam (exam): Observable<Exam> {
    return this.http.post<Exam>(apiUrl, exam, httpOptions).pipe(
      tap((exam: Exam) => console.log(`added exam w/ id=${exam._id}`)),
      catchError(this.handleError<Exam>('addExam'))
    );
  }

考试-display.component.ts

  ngOnInit() {

    this.api.getExams()
      .subscribe(res => {
        this.data = res;
        console.log(this.data);
        this.isLoadingResults = false;
      }, err => {
        console.log(err);
        this.isLoadingResults = false;
      });
  }

考试-add.component.ts

  onFormSubmit(form:NgForm) {
    this.isLoadingResults = true;
    this.api.addExam(form)
      .subscribe(res => {
         // let id = res['_id'];
          this.isLoadingResults = false;
          this.router.navigate(['/examlist']);
        }, (err) => {
          console.log(err);
          this.isLoadingResults = false;
        });
  }  

当用户登录时：

1. 如果 user_id 为 1，则他是管理员，应该能够查看exam-display.ts 中的所有内容，否则只能看到他的考试（基于他的 user_id）。
2. 当用户从exam-add.component.ts保存到数据库时，他的login/user_id应该保存到exam表中