上节我们实现了用户注册的功能,这节继续实现登录认证鉴权。
在那之前,我们把配置抽离一下,现在的 mysql、redis、nodemailer 等配置都直接写在代码里,不好维护。
安装 config 的包:
npm install --save @nestjs/config
在 AppModule 引入下:
ConfigModule.forRoot({
isGlobal: true,
envFilePath: 'src/.env'
})
设置为全局模块,指定 env 文件的位置。
然后在 src 下添加一个 .env 文件:
redis_server_host=localhost
redis_server_port=3306
然后在 RedisModule 里注入 ConfigService 来读取配置:
跑一下试试:
npm run start:dev
正确读取到了 .env 的配置。
有的同学会问为什么 .env 不放在根目录呢?
因为根目录下的配置文件不会自动复制到 dist 目录。
我们在 nest-cli.json 里加一下 assets 的配置:
asssets 是指定 build 时复制的文件,watchAssets 是在 assets 变动之后自动重新复制。
把 dist 删掉,跑下 npm run build。
你会发现 .env 确实复制过去了:
然后我们把 .env 移动到根目录,再删掉 dist,重新跑 npm run build。
并没有自动复制 .env 过去。
如果你就是想把 .env 放在根目录,那可以手动加一下复制逻辑:
这样再跑 npm run build,就会把 .env 复制过去了:
为了用到 nest cli 的复制 assets 的功能,我们还是把它放在 src 下。
在 .env 里添加 redis、mysql、nodemailer 和 nest 服务的配置:
# redis 相关配置
redis_server_host=localhost
redis_server_port=6379
redis_server_db=1
# nodemailer 相关配置
nodemailer_host=smtp.qq.com
nodemailer_port=587
nodemailer_auth_user=你的邮箱
nodemailer_auth_pass=你的授权码
# mysql 相关配置
mysql_server_host=localhost
mysql_server_port=3306
mysql_server_username=root
mysql_server_password=guang
mysql_server_database=meeting_room_booking_system
# nest 服务配置
nest_server_port=3000
然后把代码里的这些地方都改成读配置的方式:
const configService = app.get(ConfigService);
await app.listen(configService.get('nest_server_port'));
constructor(private configService: ConfigService) {
this.transporter = createTransport({
host: this.configService.get('nodemailer_host'),
port: this.configService.get('nodemailer_port'),
secure: false,
auth: {
user: this.configService.get('nodemailer_auth_user'),
pass: this.configService.get('nodemailer_auth_pass')
},
});
}
{
provide: 'REDIS_CLIENT',
async useFactory(configService: ConfigService) {
const client = createClient({
socket: {
host: configService.get('redis_server_host'),
port: configService.get('redis_server_port')
},
database: configService.get('redis_server_db')
});
await client.connect();
return client;
},
TypeOrmModule.forRootAsync({
useFactory(configService: ConfigService) {
return {
type: "mysql",
host: configService.get('mysql_server_host'),
port: configService.get('mysql_server_port'),
username: configService.get('mysql_server_username'),
password: configService.get('mysql_server_password'),
database: configService.get('mysql_server_database'),
synchronize: true,
logging: true,
entities: [
User, Role, Permission
],
poolSize: 10,
connectorPackage: 'mysql2',
extra: {
authPlugin: 'sha256_password',
}
}
},
inject: [ConfigService]
})
然后测试下现在的功能是否正常:
没啥问题。
这样我们配置抽取就成功了。
接下来继续实现登录功能。
我们先初始化用户、角色、权限的数据。
在 UserService 注入 Role 和 Permission 的 Repository:
写个初始化数据的方法:
async initData() {
const user1 = new User();
user1.username = "zhangsan";
user1.password = md5("111111");
user1.email = "xxx@xx.com";
user1.isAdmin = true;
user1.nickName = '张三';
user1.phoneNumber = '13233323333';
const user2 = new User();
user2.username = 'lisi';
user2.password = md5("222222");
user2.email = "yy@yy.com";
user2.nickName = '李四';
const role1 = new Role();
role1.name = '管理员';
const role2 = new Role();
role2.name = '普通用户';
const permission1 = new Permission();
permission1.code = 'ccc';
permission1.description = '访问 ccc 接口';
const permission2 = new Permission();
permission2.code = 'ddd';
permission2.description = '访问 ddd 接口';
user1.roles = [role1];
user2.roles = [role2];
role1.permissions = [permission1, permission2];
role2.permissions = [permission1];
await this.permissionRepository.save([permission1, permission2]);
await this.roleRepository.save([role1, role2]);
await this.userRepository.save([user1, user2]);
}
张三是管理员,有 ccc 和 ddd 接口访问权限。
李四是普通用户,只有 ccc 接口的访问权限。
然后在 UserController 添加个 handler:
@Get("init-data")
async initData() {
await this.userService.initData();
return 'done';
}
浏览器访问下:
服务端打印了包裹在事务里的 insert 语句:
在 mysql workbench 里看下:
users 表:
roles 表:
permissions 表:
user_roles 表:
role_permissions 表:
都插入成功了。
有的同学问,在生产环境也这么初始化数据么?
那肯定不会啊,开发环境可以用代码来初始化数据,然后把数据导出为 sql,生产环境可以用这个 sql 文件来初始化。
在 mysql workbench 里这样导出数据:
然后我们来实现登录:
后台管理的登录和用户端的登录是分开的:
但实现起来差别不大,我们一起来实现下。
在 UserController 添加两个接口:
@Post('login')
async userLogin(@Body() loginUser: LoginUserDto) {
console.log(loginUser);
return 'success';
}
@Post('admin/login')
async adminLogin(@Body() loginUser: LoginUserDto) {
console.log(loginUser);
return 'success';
}
添加 src/user/dto/login-user.dto.ts:
import { IsNotEmpty } from "class-validator";
export class LoginUserDto {
@IsNotEmpty({
message: "用户名不能为空"
})
username: string;
@IsNotEmpty({
message: '密码不能为空'
})
password: string;
}
测试下:
然后在 UserService 实现 login 方法:
async login(loginUserDto: LoginUserDto, isAdmin: boolean) {
const user = await this.userRepository.findOne({
where: {
username: loginUserDto.username,
isAdmin
},
relations: [ 'roles', 'roles.permissions']
});
if(!user) {
throw new HttpException('用户不存在', HttpStatus.BAD_REQUEST);
}
if(user.password !== md5(loginUserDto.password)) {
throw new HttpException('密码错误', HttpStatus.BAD_REQUEST);
}
return user;
}
根据 username 和 isAdmin 查询数据库,设置级联查询 roles 和 roles.permissions。
如果没有找到用户,返回 400 响应提示用户不存在。
如果密码不对,返回 400 响应,提示密码错误。
在 UserController 里调用下:
@Post('login')
async userLogin(@Body() loginUser: LoginUserDto) {
const user = await this.userService.login(loginUser, false);
return 'success';
}
@Post('admin/login')
async adminLogin(@Body() loginUser: LoginUserDto) {
const user = await this.userService.login(loginUser, true);
return 'success';
}
我们创建个 vo (view object)对象来封装返回的数据。
dto 是接收参数的,vo 是封装返回的数据的,entity 是和数据库表对应的。
创建 src/user/vo/login-user.vo.ts
interface UserInfo {
id: number;
username: string;
nickName: string;
email: string;
headPic: string;
phoneNumber: string;
isFrozen: boolean;
isAdmin: boolean;
createTime: number;
roles: string[];
permissions: string[]
}
export class LoginUserVo {
userInfo: UserInfo;
accessToken: string;
refreshToken: string;
}
返回用户信息和两个 token。
在 UserService 的 login 方法里封装返回的数据:
permissions 是所有 roles 的 permissions 的合并,要去下重。
const vo = new LoginUserVo();
vo.userInfo = {
id: user.id,
username: user.username,
nickName: user.nickName,
email: user.email,
phoneNumber: user.phoneNumber,
headPic: user.headPic,
createTime: user.createTime.getTime(),
isFrozen: user.isFrozen,
isAdmin: user.isAdmin,
roles: user.roles.map(item => item.name),
permissions: user.roles.reduce((arr, item) => {
item.permissions.forEach(permission => {
if(arr.indexOf(permission) === -1) {
arr.push(permission);
}
})
return arr;
}, [])
}
在 UserController 里返回 vo:
@Post('login')
async userLogin(@Body() loginUser: LoginUserDto) {
const vo = await this.userService.login(loginUser, false);
return vo;
}
@Post('admin/login')
async adminLogin(@Body() loginUser: LoginUserDto) {
const vo = await this.userService.login(loginUser, true);
return vo;
}
测试下:
/user/login
/user/admin/login
然后引入 jwt 模块:
npm install --save @nestjs/jwt
在 AppModule 里引入:
JwtModule.registerAsync({
global: true,
useFactory(configService: ConfigService) {
return {
secret: configService.get('jwt_secret'),
signOptions: {
expiresIn: '30m' // 默认 30 分钟
}
}
},
inject: [ConfigService]
}),
这里的密钥放到 .env 里配置:
# jwt 配置
jwt_secret=guang
jwt_access_token_expires_time=30m
jwt_refresh_token_expres_time=7d
这里 jwt 过期时间的语法可以看这个文档。
然后登录认证通过之后返回 access_token 和 refresh_token:
@Inject(JwtService)
private jwtService: JwtService;
@Inject(ConfigService)
private configService: ConfigService;
@Post('login')
async userLogin(@Body() loginUser: LoginUserDto) {
const vo = await this.userService.login(loginUser, false);
vo.accessToken = this.jwtService.sign({
userId: vo.userInfo.id,
username: vo.userInfo.username,
roles: vo.userInfo.roles,
permissions: vo.userInfo.permissions
}, {
expiresIn: this.configService.get('jwt_access_token_expires_time') || '30m'
});
vo.refreshToken = this.jwtService.sign({
userId: vo.userInfo.id
}, {
expiresIn: this.configService.get('jwt_refresh_token_expres_time') || '7d'
});
return vo;
}
另一个接口同样的处理。
然后再增加一个 refresh_token 的接口用来刷新 token:
@Get('refresh')
async refresh(@Query('refreshToken') refreshToken: string) {
try {
const data = this.jwtService.verify(refreshToken);
const user = await this.userService.findUserById(data.userId, false);
const access_token = this.jwtService.sign({
userId: user.id,
username: user.username,
roles: user.roles,
permissions: user.permissions
}, {
expiresIn: this.configService.get('jwt_access_token_expires_time') || '30m'
});
const refresh_token = this.jwtService.sign({
userId: user.id
}, {
expiresIn: this.configService.get('jwt_refresh_token_expres_time') || '7d'
});
return {
access_token,
refresh_token
}
} catch(e) {
throw new UnauthorizedException('token 已失效,请重新登录');
}
}
在 UserService 实现这个 findUserById 方法:
async findUserById(userId: number, isAdmin: boolean) {
const user = await this.userRepository.findOne({
where: {
id: userId,
isAdmin
},
relations: [ 'roles', 'roles.permissions']
});
return {
id: user.id,
username: user.username,
isAdmin: user.isAdmin,
roles: user.roles.map(item => item.name),
permissions: user.roles.reduce((arr, item) => {
item.permissions.forEach(permission => {
if(arr.indexOf(permission) === -1) {
arr.push(permission);
}
})
return arr;
}, [])
}
}
同样的方式再实现一个后台管理的 refresh 接口:
@Get('admin/refresh')
async adminRefresh(@Query('refreshToken') refreshToken: string) {
try {
const data = this.jwtService.verify(refreshToken);
const user = await this.userService.findUserById(data.userId, true);
const access_token = this.jwtService.sign({
userId: user.id,
username: user.username,
roles: user.roles,
permissions: user.permissions
}, {
expiresIn: this.configService.get('jwt_access_token_expires_time') || '30m'
});
const refresh_token = this.jwtService.sign({
userId: user.id
}, {
expiresIn: this.configService.get('jwt_refresh_token_expres_time') || '7d'
});
return {
access_token,
refresh_token
}
} catch(e) {
throw new UnauthorizedException('token 已失效,请重新登录');
}
}
整体测试下:
POST /user/login
GET /user/refresh
POST /user/admin/login
GET /user/admin/refresh
都没啥问题。
其实现在 controller 里有很多重复代码,比如多次生成 jwt 的代码,这个大家可以自己重构下,抽一个方法出来。
然后我们加上 LoginGuard 和 PermissionGuard 来做鉴权:
nest g guard login --flat --no-spec
nest g guard permission --flat --no-spec
LoginGuard 的实现代码如下:
import { CanActivate, ExecutionContext, Inject, Injectable, UnauthorizedException } from '@nestjs/common';
import { Reflector } from '@nestjs/core';
import { JwtService } from '@nestjs/jwt';
import { Request } from 'express';
import { Observable } from 'rxjs';
import { Permission } from './user/entities/permission.entity';
interface JwtUserData {
userId: number;
username: string;
roles: string[];
permissions: Permission[]
}
declare module 'express' {
interface Request {
user: JwtUserData
}
}
@Injectable()
export class LoginGuard implements CanActivate {
@Inject()
private reflector: Reflector;
@Inject(JwtService)
private jwtService: JwtService;
canActivate(
context: ExecutionContext,
): boolean | Promise<boolean> | Observable<boolean> {
const request: Request = context.switchToHttp().getRequest();
const requireLogin = this.reflector.getAllAndOverride('require-login', [
context.getClass(),
context.getHandler()
]);
if(!requireLogin) {
return true;
}
const authorization = request.headers.authorization;
if(!authorization) {
throw new UnauthorizedException('用户未登录');
}
try{
const token = authorization.split(' ')[1];
const data = this.jwtService.verify<JwtUserData>(token);
request.user = {
userId: data.userId,
username: data.username,
roles: data.roles,
permissions: data.permissions
}
return true;
} catch(e) {
throw new UnauthorizedException('token 失效,请重新登录');
}
}
}
用 reflector 从目标 controller 和 handler 上拿到 require-login 的 metadata。
如果没有 metadata,就是不需要登录,返回 true 放行。
否则从 authorization 的 header 取出 jwt 来,把用户信息设置到 request,然后放行。
如果 jwt 无效,返回 401 响应,提示 token 失效,请重新登录。
(这段代码看不懂的话,回头去看下 RBAC 权限控制那节)
然后全局启用这个 Guard,在 AppModule 里添加这个 provider:
{
provide: APP_GUARD,
useClass: LoginGuard
}
然后在 AppController 添加 aaa、bbb 两个接口:
@Get('aaa')
aaaa() {
return 'aaa';
}
@Get('bbb')
bbb() {
return 'bbb';
}
访问下:
然后在 aaa 加上 require-login 的 matadata
@Get('aaa')
@SetMetadata('require-login', true)
aaaa() {
return 'aaa';
}
会提示用户未登录:
而 bbb 还是可以直接访问的:
在 postman 里登录下,拿到 access_token:
添加到 authorization 的 header 里,就可以访问了:
然后我们继续实现 PermissionGuard:
import { CanActivate, ExecutionContext, Inject, Injectable, UnauthorizedException } from '@nestjs/common';
import { Reflector } from '@nestjs/core';
import { Request } from 'express';
@Injectable()
export class PermissionGuard implements CanActivate {
@Inject(Reflector)
private reflector: Reflector;
async canActivate(
context: ExecutionContext,
): Promise<boolean> {
const request: Request = context.switchToHttp().getRequest();
if(!request.user) {
return true;
}
const permissions = request.user.permissions;
const requiredPermissions = this.reflector.getAllAndOverride<string[]>('require-permission', [
context.getClass(),
context.getHandler()
])
if(!requiredPermissions) {
return true;
}
for(let i = 0; i < requiredPermissions.length; i++) {
const curPermission = requiredPermissions[i];
const found = permissions.find(item => item.code === curPermission);
if(!found) {
throw new UnauthorizedException('您没有访问该接口的权限');
}
}
return true;
}
}
同样是用 reflector 取出 handler 或者 controller 上的 require-permission 的 metadata。
如果没有,就是不需要权限,直接放行,返回 true。
对于需要的每个权限,检查下用户是否拥有,没有的话就返回 401,提示没权限。
否则就放行,返回 true。
同样是全局启用这个 PermissionGuard
{
provide: APP_GUARD,
useClass: PermissionGuard
}
然后在 aaa 方法上声明需要的权限:
@Get('aaa')
@SetMetadata('require-login', true)
@SetMetadata('require-permission', ['ddd'])
aaaa() {
return 'aaa';
}
测试下:
访问 /user/admin/login 登录 zhangsan 账号,拿到 accessToken
带上 accessToken,是可以访问 aaa 接口的,因为 zhangsan 有这个权限
访问 /user/login 登录 lisi 账号,拿到 accessToken
带上 accessToken,就不能访问 aaa 接口的,因为 lisi 没有这个权限
这样,接口鉴权就完成了。
最后我们把这两个 @SetMetadata 封装成自定义装饰器
新建 src/custom.decorator.ts
import { SetMetadata } from "@nestjs/common";
export const RequireLogin = () => SetMetadata('require-login', true);
export const RequirePermission = (...permissions: string[]) => SetMetadata('require-permission', permissions);
然后给接口添加鉴权就可以这样写了:
此外还可以创建个自定义参数装饰器:
import { SetMetadata } from "@nestjs/common";
import { createParamDecorator, ExecutionContext } from '@nestjs/common';
import { Request } from "express";
export const RequireLogin = () => SetMetadata('require-login', true);
export const RequirePermission = (...permissions: string[]) => SetMetadata('require-permission', permissions);
export const UserInfo = createParamDecorator(
(data: string, ctx: ExecutionContext) => {
const request = ctx.switchToHttp().getRequest<Request>();
if(!request.user) {
return null;
}
return data ? request.user[data] : request.user;
},
)
UserInfo 装饰器是用来取 user 信息传入 handler 的。
传入属性名的时候,返回对应的属性值,否则返回全部的 user 信息。
我们在 aaa 方法里测试下:
拿到 zhangsan 的 accessToken 来访问下 aaa 接口:
可以看到,服务端从 request 取出了 user 的值传入了 handler:
而这个 request.user 是在 LoginGuard 里设置的。
这样,就完成了鉴权和拿到用户信息的功能。
代码在小册仓库。
总结
这节我们实现了配置抽离、基于 jwt 登录、鉴权功能。
配置抽离使用 @nestjs/config 包,把配置放在 src 下的 .env 文件里,然后代码里从 configService 读取配置。
这样可以配置 nest-cli.json 的 assets 和 watchAssets 来自动把 env 文件复制到 dist 目录下。
我们使用代码做的数据初始化,线上要删掉这个接口,用导出的 sql 文件来初始化。
登录成功之后,返回 access_token、refresh_token 还有用户信息、roles、permissions 等。
并支持使用 refreshToken 来刷新 token。
之后使用 LoginGuard、PermissionGuard 来做登录和权限的鉴权,根据 handler 上的 metadata 来确定要不要做鉴权、需要什么权限。
我们还封装了几个自定义装饰器,用于方便的设置 metadata,从 request 取数据注入 handler。
至此,注册、登录、鉴权、配置抽离等功能就完成了。