Reactjs 如何通过React frontend和JWT向Laravel web应用程序添加按用户类型划分的路由保护？

我正在制作一个Laravel应用程序，让老师为学生管理考试。我使用React前端，我使用JWT对用户进行身份验证。我想按用户类型保护路由（例如，教师可以访问页面进行测试，而学生不能）

通常情况下，我可以做类似的事情

Route::middleware('jwt.auth')->get('users', function () {
    return auth('api')->user();
});

但我将所有内容路由到我的

welcome.blade.php

，并使用React路由器呈现路由。我就是这样安排一切的：

Route::any('{all}', function () {
    return view('welcome');
})->where(['all' => '.*']);

我这样做是因为我注意到，当我刷新一个不是根目录的路由时，会出现404错误（例如，如果我刷新/teacher home上的页面，我通常会得到404错误）。我的问题是，除了/signin和/signup（希望它们不受保护，以便任何人都可以访问）之外，我如何按用户类型保护我的路由

以下是我登录用户的代码：

public function login() {
        // get email and password from request
        $credentials = request(['email', 'password']);

        // try to auth and get the token using api authentication
        if (!$token = auth('api')->attempt($credentials)) {
            // if the credentials are wrong we send an unauthorized error in json format
            return response()->json(['error' => 'Unauthorized'], 401);
        }
        return response()->json([
            'token' => $token,
            'type' => 'bearer',
            'expires' => auth('api')->factory()->getTTL() * 60, // time to expiration

        ]);

以下是我的用户迁移：

Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->enum('user_type', ['teacher', 'student']);
            $table->rememberToken();
            $table->timestamps();
        });

这是我所有路线的清单

<Route exact path='/' render={(pathName) => <Redirect to='/teacher-home'/>}/>
                        <Route exact path='/teacher-question-repo' render={(pathName) => <QuestionRepo path={pathName}/>}/>
                        <Route exact path='/teacher-home' render={(pathName) => <TeacherHome path={pathName}/>}/>
                        <Route exact path='/teacher-monitor' render={(pathName) => <TeacherMonitor path={pathName}/>}/>
                        <Route exact path='/teacher-tests' render={pathName => <TestRepo path={pathName}/>}/>
                        <Route exact path='/student-home' component={StudentHome}/>
                        <Route exact path='/student-test' render={() => <StudentTest testName="Normal Curves"/>}/>
                        <Route exact path='/edit-question/:item_id' component={EditQuestion}/>
                        <Route exact path='/teacher-tests/new-test' render={(pathName) => <TestForm path={pathName}/>}/>
                        <Route exact path='/teacher-tests/edit-test/:test_id' render={(pathName) => <TestForm path={pathName}/>}/>
                        <Route exact path='/signin' component={SignIn}/>
                        <Route exact path='/signup' component={SignUp}/>

}/>
}/>
}/>
}/>
}/>
}/>
}/>
}/>

因为react正在处理您的路由，所以您不应该在服务器端执行身份验证

您可以使用自定义路由组件并在其中添加身份验证逻辑。请看以下教程：

---

由于react正在处理您的路由，您不应该在服务器端执行身份验证

您可以使用自定义路由组件并在其中添加身份验证逻辑。请看以下教程：

---

您不能仅依靠react来保护您的信息。您还需要保护后端上的路由。否则，您可以直接通过http请求访问路由，并获得所需的所有信息。这就是JWT的全部要点。您将令牌传递到后端以对用户进行身份验证，而不是每次都查询数据库。但您绝对必须在服务器端执行身份验证。React无法保护您的敏感信息。也许我在回答中不清楚，但您肯定需要保护React组件调用的API路由。然而，问题是如何保护React路由。海报使用的是仅呈现react router视图（即无数据）的回退路由。您不能仅依靠react来保护您的信息。您还需要保护后端上的路由。否则，您可以直接通过http请求访问路由，并获得所需的所有信息。这就是JWT的全部要点。您将令牌传递到后端以对用户进行身份验证，而不是每次都查询数据库。但您绝对必须在服务器端执行身份验证。React无法保护您的敏感信息。也许我在回答中不清楚，但您肯定需要保护React组件调用的API路由。然而，问题是如何保护React路由。海报使用的是仅呈现react router视图（即无数据）的回退路由。