实现登录功能jwt or token+redis？—从零开始搭建一个高颜值后台管理系统全栈框架（三）-灵析社区

前言

这一期我们来实现登录功能，登录实现方案比较多，下面给大家分析一下各种方案的优缺点。

实现方案分析

jwt or token+redis

常用的登录实现方案：

• 基于Session/Cookie的登录：用户在输入用户名和密码后，服务器会验证用户的身份，并将用户信息存储在Session或Cookie中。在随后的请求中，服务器会检查相应的Session或Cookie来验证用户身份。
• Token-Based登录：用户在输入用户名和密码后，服务器会颁发一个加密的Token给客户端，并把token对应的用户信息存到redis中，客户端需要在随后的请求中将Token添加到请求头中，服务器会从redis中检查Token是否存在以验证用户身份。
• JWT（JSON Web Token）登录：JWT是一种基于Token的身份验证方案，它使用JSON格式来传输信息，并对其进行签名以保证安全性，后续不需要做服务器验证。

上面方案中我们首先把Session/Cookie排除掉，下面我们从token+redis和jwt方案中选一个。

先看一下JWT方案的优点：

1. 去中心化，便于分布式系统使用
2. 基本信息可以直接放在token中。 username，nickname，role...
3. 功能权限较少的话，可以直接放在token中。用bit位表示用户所具有的功能权限

在我看来，JWT某些优点，对于后台管理系统的登录方案可能是缺点。做过后端管理系统的人应该知道，用户信息或权限可能会经常变更，如果使用JWT方案在用户权限变更后，没办法使已颁发的token失效，有的人说服务器存一个黑名单可以解决这个问题，这种其实就是有状态了，就不是去中心化了，那就失去了使用JWT的意义了，所以我们这个后台管理系统登录实现方案使用token+redis方案。个人觉得JWT适用论坛以及一些用户一旦注册后，信息就不会再变更的系统。

单token or 双token

基本每个axios封装自动刷新token的文章下面都会有人说都搞自动刷新了，还不如用一个token，这里我说一下我的理解。先说明我打算使用双token这种方案，即一个普通token和一个用来刷新token的token。

使用双token主要还是从安全角度来说，如果是个人的小网站，不考虑安全的情况下是可以用单token的，甚至都可以在每个请求上都带上用户账号和密码，然后后端用账号密码做验证，这样连token都不需要了。

个人理解的双token的好处是：

access token每个请求都要求被携带，这样它暴露的概率会变大，但是它的有效期又很短，即使暴露了，也不会造成特别大的损失。而refresh token只有在access token失效的时候才会用到，使用的频率比access token低很多，所以暴露的概率也小一些。如果只使用一个token，要么把这个token的有效期设置的时间很长，要么动态在后端刷新，那如果这个token暴露后，别人可以一直用这个token干坏事，如果把这个token有效期设置很短，并且后端也不自动刷新，那用户可能用一会就要跳到登录页取登录一下，这样用户体验很差。所以本文采用双token的方式去实现登录。

用户管理

实现登录功能之前，需要先实现用户增删改查功能，没有用户没办法登录。

使用脚本快速创建文件和模版代码

node ./script/create-module user

改造实体文件，添加字段

// src/module/user/entity/user.ts
import { Entity, Column } from 'typeorm';
import { BaseEntity } from '../../../common/base.entity';
import { omit } from 'lodash';
import { UserVO } from '../vo/user';

@Entity('sys_user')
export class UserEntity extends BaseEntity {
  @Column({ comment: '用户名称' })
  userName: string;
  @Column({ comment: '用户昵称' })
  nickName: string;
  @Column({ comment: '手机号' })
  phoneNumber: string;
  @Column({ comment: '邮箱' })
  email: string;
  @Column({ comment: '头像', nullable: true })
  avatar?: string;
  @Column({ comment: '性别（0:女，1:男）', nullable: true })
  sex?: number;
  @Column({ comment: '密码' })
  password: string;
  toVO(): UserVO {
    return omit<UserEntity>(this, ['password']) as UserVO;
  }
}

启动项目后，因为typeorm配置里给自动同步打开了，实体会自动创建表和字段。

改造DTO，添加一些字段校验

// src/module/user/dto/user.ts
import { ApiProperty } from '@midwayjs/swagger';
import { UserEntity } from '../entity/user';
import { BaseDTO } from '../../../common/base.dto';
import { Rule } from '@midwayjs/validate';
import { R } from '../../../common/base.error.util';
import {
  email,
  phone,
  requiredString,
} from '../../../common/common.validate.rules';

export class UserDTO extends BaseDTO<UserEntity> {
  @ApiProperty({ description: '用户名称' })
  @Rule(requiredString.error(R.validateError('用户名称不能为空')))
  userName: string;
  @ApiProperty({ description: '用户昵称' })
  @Rule(requiredString.error(R.validateError('用户昵称不能为空')))
  nickName: string;
  @ApiProperty({ description: '手机号' })
  @Rule(phone.error(R.validateError('无效的手机号格式')))
  phoneNumber: string;
  @ApiProperty({ description: '邮箱' })
  @Rule(email.error(R.validateError('无效的邮箱格式')))
  email: string;
  @ApiProperty({ description: '头像', nullable: true })
  avatar?: string;
  @ApiProperty({ description: '性别（0:女，1:男）', nullable: true })
  sex?: number;
}

改造service里面的create方法

// src/module/user/service/user.ts
import { Provide } from '@midwayjs/decorator';
import { InjectEntityModel } from '@midwayjs/typeorm';
import { Repository } from 'typeorm';
import * as bcrypt from 'bcryptjs';
import { omit } from 'lodash';

import { BaseService } from '../../../common/base.service';
import { UserEntity } from '../entity/user';
import { R } from '../../../common/base.error.util';
import { UserVO } from '../vo/user';

@Provide()
export class UserService extends BaseService<UserEntity> {
  @InjectEntityModel(UserEntity)
  userModel: Repository<UserEntity>;

  getModel(): Repository<UserEntity> {
    return this.userModel;
  }

  async create(entity: UserEntity): Promise<UserVO> {
    const { userName, phoneNumber, email } = entity;

    let isExist = (await this.userModel.countBy({ userName })) > 0;

    if (isExist) {
      throw R.error('当前用户名已存在');
    }

    isExist = (await this.userModel.countBy({ phoneNumber })) > 0;

    if (isExist) {
      throw R.error('当前手机号已存在');
    }

    isExist = (await this.userModel.countBy({ email })) > 0;

    if (isExist) {
      throw R.error('当前邮箱已存在');
    }

    // 添加用户的默认密码是123456，对密码进行加盐加密
    const password = bcrypt.hashSync('123456', 10);

    entity.password = password;

    await this.userModel.save(entity);

    // 把entity中的password移除返回给前端
    return omit(entity, ['password']) as UserVO;
  }

  async edit(entity: UserEntity): Promise<void | UserVO> {
    const { userName, phoneNumber, email, id } = entity;
    let user = await this.userModel.findOneBy({ userName });

    if (user && user.id !== id) {
      throw R.error('当前用户名已存在');
    }

    user = await this.userModel.findOneBy({ phoneNumber });

    if (user && user.id !== id) {
      throw R.error('当前手机号已存在');
    }

    user = await this.userModel.findOneBy({ email });

    if (user && user.id !== id) {
      throw R.error('当前邮箱已存在');
    }

    await this.userModel.save(entity);

    return omit(entity, ['password']) as UserVO;
  }
}

这里说一下密码加盐的好处：

1. 提高密码安全性 密码加盐后，即使多个用户采用了相同的密码，其存储的哈希值也不同，从而避免了彩虹表攻击。攻击者无法通过事先计算出来的哈希值来破解密码。
2. 防止暴力破解 如果所有用户的密码都使用相同的哈希函数和密钥进行加密，则攻击者可以通过对已知的哈希值进行逆推来破解大量的用户密码。因此，每个用户使用不同的盐值可以防止这种攻击方式。
3. 加强数据安全性 用户密码是非常敏感的信息，泄露后可能会导致严重的后果。使用加盐技术可以保护用户密码，在密码泄露事件发生时，黑客也无法轻易地获取用户的真实密码。
4. 避免重复密码 由于一些用户可能会采用相同的密码，如果不使用加盐技术，那么他们的哈希值也会相同，从而为攻击者提供了更多的破解机会。使用加盐技术可以避免这种情况的发生。

目前大部分系统都是用这种方案存储密码。

测试接口

我们虽然可以使用swagger ui去测试，但是这个不太好用，推荐使用postman或Apifox，我这里使用Apifox。

使用Apifox新建一个项目，然后通过swagger把接口导入进去。

接口自动导进来了，我们测试一下新增用户接口：

查看数据库，数据已经插入进去了。

又新增了一条数据，虽然默认密码都是123456，但是数据库中存的是不一样的，这就是密码加盐的结果。

测试一下分页接口

实现前端用户管理页面

列表页

import { t } from '@/utils/i18n';
import { Space, Table, Form, Row, Col, Input, Button, Popconfirm, App, Modal, FormInstance } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useAntdTable, useRequest } from 'ahooks'
import dayjs from 'dayjs'
import { useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';

import NewAndEditForm from './newAndEdit';
import userService, { User } from './service';

const UserPage = () => {

  const [form] = Form.useForm();

  const { message } = App.useApp();
  const { tableProps, search: { submit, reset } } = useAntdTable(userService.getUserListByPage, { form });
  const { runAsync: deleteUser } = useRequest(userService.deleteUser, { manual: true });
  const [editData, setEditData] = useState<User | null>(null);
  const [saveLoading, setSaveLoading] = useState(false);

  const formRef = useRef<FormInstance>(null);

  const columns: ColumnsType<any> = [
    {
      title: t("qYznwlfj" /* 用户名 */),
      dataIndex: 'userName',
    },
    {
      title: t("gohANZwy" /* 昵称 */),
      dataIndex: 'nickName',
    },
    {
      title: t("yBxFprdB" /* 手机号 */),
      dataIndex: 'phoneNumber',
    },
    {
      title: t("XWVvMWig" /* 邮箱 */),
      dataIndex: 'email',
    },
    {
      title: t("ykrQSYRh" /* 性别 */),
      dataIndex: 'sex',
      render: (value: number) => value === 1 ? t("AkkyZTUy" /* 男 */) : t("yduIcxbx" /* 女 */),
    },
    {
      title: t("TMuQjpWo" /* 创建时间 */),
      dataIndex: 'createDate',
      render: (value: number) => value && dayjs(value).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: t("QkOmYwne" /* 操作 */),
      key: 'action',
      render: (_, record) => record.userName !== 'admin' && (
        <Space size="middle">
          <a
            onClick={() => {
              setEditData(record);
              setFormOpen(true);
            }}
          >{t("qEIlwmxC" /* 编辑 */)}</a>
          <Popconfirm
            title={t("JjwFfqHG" /* 警告 */)}
            description={t("nlZBTfzL" /* 确认删除这条数据？ */)}
            onConfirm={async () => {
              await deleteUser(record.id);
              message.success(t("bvwOSeoJ" /* 删除成功！ */));
              submit();
            }}
          >
            <a>{t("HJYhipnp" /* 删除 */)}</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];


  const [formOpen, setFormOpen] = useState(false);

  const openForm = () => {
    setFormOpen(true);
  };

  const closeForm = () => {
    setFormOpen(false);
    setEditData(null);
  };

  const saveHandle = () => {
    submit();
    setFormOpen(false);
    setEditData(null);
  }

  return (
    <div>
      <Form onFinish={submit} form={form} size="large" className='dark:bg-[rgb(33,41,70)] bg-white p-[24px] rounded-lg'>
        <Row gutter={24}>
          <Col className='w-[100%]' lg={24} xl={8} >
            <Form.Item name="nickName" label={t("rnyigssw" /* 昵称 */)}>
              <Input onPressEnter={submit} />
            </Form.Item>
          </Col>
          <Col className='w-[100%]' lg={24} xl={8}>
            <Form.Item name="phoneNumber" label={t("SPsRnpyN" /* 手机号 */)}>
              <Input onPressEnter={submit} />
            </Form.Item>
          </Col>
          <Col className='w-[100%]' lg={24} xl={8}>
            <Space>
              <Button onClick={submit} type='primary'>{t("YHapJMTT" /* 搜索 */)}</Button>
              <Button onClick={reset}>{t("uCkoPyVp" /* 清除 */)}</Button>
            </Space>
          </Col>
        </Row>
      </Form>
      <div className="mt-[16px] dark:bg-[rgb(33,41,70)] bg-white rounded-lg px-[12px]">
        <div className='py-[16px] '>
          <Button onClick={openForm} type='primary' size='large' icon={<PlusOutlined />}>{t("morEPEyc" /* 新增 */)}</Button>
        </div>
        <Table
          rowKey="id"
          scroll={{ x: true }}
          columns={columns}
          className='bg-transparent'
          {...tableProps}
        />
      </div>
      <Modal
        title={editData ? t("wXpnewYo" /* 编辑 */) : t("VjwnJLPY" /* 新建 */)}
        open={formOpen}
        onOk={() => {
          formRef.current?.submit();
        }}
        destroyOnClose
        width={640}
        zIndex={1001}
        onCancel={closeForm}
        confirmLoading={saveLoading}
      >
        <NewAndEditForm
          ref={formRef}
          editData={editData}
          onSave={saveHandle}
          open={formOpen}
          setSaveLoading={setSaveLoading}
        />
      </Modal>
    </div>
  );
}

export default UserPage;