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