TDesign中后台管理系统-用户登录

中后台系统第一个要实现的功能就是登录了，我们通常的逻辑是让用户在登录页面输入用户名和密码，调用后端接口去验证用户的合法性，然后根据接口返回的结果进行进一步的路由。本篇我们就介绍一下用户登录功能的开发过程。

1 创建用户表

用户表的话我们设计两个字段，用户名和密码，建表语句如下

CREATE TABLE `users`  (
  `id` int(0) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `password` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 7 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

2 开发后端接口

后端我们使用express框架，把涉及到用户的接口单独拆分到user.js中。打开后端的工程，新建一个user.js文件

因为需要给密码加密，我们引入一个加密的包，在Terminal里输入安装命令

npm install bcryptjs --save

在验证用户名和密码都正确后，给前端返回一个token，我们需要安装支持token的包

npm install jsonwebtoken --save

后端接口需要解析json数据，需要安装json解析包

npm install body-parser --save

包安装好了之后，在user.js中贴入如下代码，来验证用户名和密码

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
// 创建 MySQL 连接池
const pool = require('./database');
// 用户登录
router.post('/login', (req, res) => {
  const { username, password } = req.body;
  console.log(username, password)
  // 检查用户名是否存在
  pool.query('SELECT * FROM users WHERE username = ?', [username], (error, results) => {
    if (error) throw error;
    console.log(results)
    if (results.length === 0) {
      res.status(401).json({ code: 401, message: 'Invalid username or password' });
    } else {
      const user = results[0];

      // 验证密码是否匹配
      bcrypt.compare(password, user.password, (err, result) => {
        if (err) throw err;
        console.log("验证密码", result)
        if (result) {
          // 生成 JWT 令牌
          const token = jwt.sign({ id: user.id, username: user.username }, 'your_secret_key', { expiresIn: '1h' });
          res.status(200).json({ code: 200, message: "登录成功", data: token });
        } else {
          res.status(401).json({ code: 401, message: 'Invalid username or password' });
        }
      });
    }
  });
});

  module.exports = router;

然后在index.js里注册用户路由

const express = require('express');
const app = express();
const cors = require('cors');
const menuROuter = require('./menu')
const userRoutes = require('./user');
const bodyParser = require('body-parser');
// 定义路由
app.use(bodyParser.json());
app.get('/', (req, res) => {
  res.send('Hello, World!');
});
app.use(cors({
  origin: 'http://localhost:3002',
  credentials: true
}));
app.use('/api/get-menu-list',menuROuter);
app.use('/api/user',userRoutes);
// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

3 测试接口

我们后端接口写好了之后需要进行测试，使用postman测试我们的接口

注意这里我们是post请求，body要选择json然后按照json的语法去构造参数，在Header里要设置我们的格式是json

4 修改登录页面调用后端接口

模板里给的是mock调用，我们需要真实的调用后端接口，找到store文件夹下的user.ts，改造登录方式为调用后端接口

import { defineStore } from 'pinia';

import { usePermissionStore } from '@/store';
import type { UserInfo } from '@/types/interface';
import { login } from '@/api/login';

const InitUserInfo: UserInfo = {
  name: '', // 用户名，用于展示在页面右上角头像处
  roles: [], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
};

export const useUserStore = defineStore('user', {
  state: () => ({
    token: 'main_token', // 默认token不走权限
    userInfo: { ...InitUserInfo },
  }),
  getters: {
    roles: (state) => {
      return state.userInfo?.roles;
    },
  },
  actions: {
    async login(userInfo: Record<string, unknown>) {
      const res = await login(userInfo.account.toString(),userInfo.password.toString());
      if (res.code === 200) {
        this.token = res.data;
      } else {
        throw res;
      }
    },
    async getUserInfo() {
      const mockRemoteUserInfo = async (token: string) => {
        if (token === 'main_token') {
          return {
            name: 'Tencent',
            roles: ['all'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
          };
        }
        return {
          name: 'td_dev',
          roles: ['UserIndex', 'DashboardBase', 'login'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
        };
      };
      const res = await mockRemoteUserInfo(this.token);

      this.userInfo = res;
    },
    async logout() {
      this.token = '';
      this.userInfo = { ...InitUserInfo };
    },
  },
  persist: {
    afterRestore: () => {
      const permissionStore = usePermissionStore();
      permissionStore.initRoutes();
    },
    key: 'user',
    paths: ['token'],
  },
});

这里将调用后端接口的代码单独封装一下，在src/api目录下新建一个login.ts文件，输入如下代码

// store/actions.ts
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

export const login = (username: string, password: string): Promise<any> => {
  return new Promise((resolve, reject) => {
    const requestConfig: AxiosRequestConfig = {
      url: 'http://localhost:3000/api/user/login',
      method: 'post',
      data: {
        username,
        password,
      },
      headers: {
        'Content-Type': 'application/json',
      },
    };

    axios(requestConfig)
      .then((response: AxiosResponse) => {
        const result = response.data;
        if (result.code === 200 && result.message === '登录成功') {
          resolve(result);
        } else {
          reject(new Error(result.message));
        }
      })
      .catch((error) => {
        reject(error);
      });
  });
};

我们使用axios库去请求后端接口，需要先安装一下库

npm install axios --save

代码写好之后，启动前后端项目

node index.js //启动后端项目命令
npm run dev //启动前端项目命令

最终效果

总结

我们本篇讲解了TDesign实现登录的过程，需要先创建用户表，然后编写后端登录代码，编写前端代码调用后端接口。

总体上流程并不复杂，主要是要熟悉axios库的用法即可。