【原】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文件，输入如下代码

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库的用法即可。