Laravel-Angular-Material中文文档——JWT AUTH

发表于   |   分类于   |  

基本配置

当你使用composer create-project来安装时，下面的命令也将执行
php artisan jwt:generate
它将生成JWT运行所需的JWT_SECRET

JSON Web Token是无状态的，这也是为什么我们从不把它储存在数据库的原因

JWT认证的样本代码在LoginController中有提供
你的API知道，如果用户发送了Authorization: Bearer {token}的头，这个用户是经过验证的。
这已经在API Service中为你自动配置

推荐你将config/jwt中生成的token移至.env中，这个问题将在下一个版本中修复

如果你想修改默认的验证模型，确保你更新了config/jwt.php中的内容来匹配你做的改动。特别是你想要更新user & identifier的时候。

认证路由

参考上一章中的JWT Authenticated routes部分

多租户

应用中往往需要多个用户角色，对于这种问题你可以创建两个路由组(比方说老师和学生)

  • 一个只允许学生（验证用户的学生身份）
  • 一个只允许老师（验证用户的教师身份）
    为他们各自创建一个中间件
    当然，也可以创建一个带参数的中间件

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
class TeacherAuthMiddleware
{
    public function handle($request, Closure $next)
    {
        $user = \Auth::user();
        if (!$user || $user->type !== 'teacher') {
            return response()->error('Not Authorized', 401);
        }
        return $next($request);
    }
}

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
class StudentAuthMiddleware
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $user = \Auth::user();
        if (!$user || $user->type !== 'student') {
            return response()->error('Not Authorized', 401);
        }
        return $next($request);
    }
}

不要忘记将这些中间件添加至你的Http Kerenal中
接下来，你可以在routes.php中使用它们

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
//Public endpoints
$api->group([], function ($api) {
  
});
//Protected endpoints (Mentor or Mentee)
$api->group(['middleware' => 'api.auth'], function ($api) {
  
});
//Protected: Teacher only
$api->group(['middleware' => ['api.auth', 'auth.teacher']], function ($api) {
  
});
//Protected: Student only
$api->group(['middleware' => ['api.auth', 'auth.student']], function ($api) {
  
});

测试

参考下一章节中的JWT Auth Test部分

注册 & 登录

Satelizer

Laravel & Angular material starter引入了satellizer来管理token
你可以在angular/config/satellizer.config.js中自定制satellizer的配置

注册功能

注册图片
注册功能是预置的功能
/register路由的配置文件为routes.config.js
你有一个包括register-form组件的页面文件register.page.html
register-form组件通过使用satellizer和Auth\AuthController.php文件来实现用户注册功能
如果你想添加新的字段，那么你应该同时编辑view，component和AuthController

登录功能

登录图片
登录功能也是预置功能。
登录的路由/login是在route.config.js中配置的。
在login.page.html中包含着login-form组件。
login-form组件通过使用satellizer和Auth\AuthController.php实现用户的认证功能
我们可以在Auth\AuthController.php中检验登录功能的逻辑

重置密码

忘记密码

忘记密码
忘记密码功能是预置的。
忘记密码的路由/forget-password的配置文件被配置在routes.config.js中
forget_password.page.html中包含着forget-password组件

这个组件会发送一个带有重置密码链接的电子邮件。
你可以在Auth\PasswordResetController.php文件中检查它的逻辑

重置链接
默认的链接前缀是localhost:8000，你需要在.env增加对应的变量并合理地管理它。

Email的发送地址
在使用这一新特性之前，你需要替换Auth\PasswordResetController.php为你自己使用的邮箱名

重置密码


点击邮件中的重置密码链接会转到/reset-password/:email/:token的路由
当加载图案旋转时，reset-password组件将会立刻检测token的有效性
一旦数据库验证通过，重置密码的表单就会出现，提交表单就可以成功重置密码了。

验证路由（前端）

如果你打开angular/config/routes.config.js文件，你会注意到我们有一个空的参数data: {}，每个state都继承了这一属性因为它在抽象路由app被定义。
尽管这是一个可选的参数，我们可以在angular/run/routes.run.js中自定义我们自己所需的逻辑，然后通过检查data对象中的值并据此完成认证逻辑。
如果你设置成下面的样子 

1
2
3
data: {
	auth: true
}

这些路由就会被保护起来（他们需要认证权限）
这一行为可以在单独的路由中启用，也可以通过创建抽象的路由来定义一个路由群组来启用。
我们通过设置一个字符串值来继承这一行为，比如auth: 'admin'，然后你可以在routes.run.js中定义你自己的逻辑

您的打赏是对我最大的鼓励！