请问大家，如何在Spring Boot + Vue项目中实现用户登录后显示并可以增删改查当前用户账单信息？

Question

springboot+vue项目,数据表有用户表和用户账单表，可以获得当前用户的信息，但是不知道怎么实现用户登录后显示当前用户的账单信息，比如a登录，只显示a的账单信息，并且可以增删改查这样的效果，搜视频没有搜到，请问应该怎么做，或者推荐去看谁的视频

搜过视频和帖子，但没有搜到详细的没有看懂，基础不太好，希望能解决

Answer 1

很直观的方法，把登录信息存储在 localStorage 里面。

const userInfo = JSON.stringify(data);
localStorage.setItem("userInfo ", userInfo );

在账单页面先获取到这个信息

const data= localStorage.getItem("userInfo");
let userInfo = JSON.parse(data);

假如你是通过用户 id 来查询，也就是说 userInfo 里有 id 数据。
使用这个 id 来执行一个 post 请求。这个可使用之前获取用户信息的那个请求库，或使用 fetch。

然后后端接收这个 id 值，并且执行数据库查询请求。下面是 Mybatis SELECT 标签内写法。

SELECT * FROM user u WHERE u.id = #{接收的参数名}

把这个数据返回给前端展示即可。
增删改查就是类似的，不过数据库语言写法不一样，关键的一点就是你需要后端获取到这个用户的标识，比如 id 来判断到底对哪个用户进行操作。

Answer 2

后端部分
用户登录与Token生成：

实现用户登录接口，验证用户信息后生成JWT（JSON Web Token），并将用户ID（如UUID或微信OpenID）嵌入到Token中返回给前端。
账单管理接口：

创建账单：实现创建账单的接口，前端传递账单信息，后端从Token中解析出用户ID，将用户ID与账单信息一起存入账单表。
获取账单：实现获取账单的接口，后端从Token中解析出用户ID，根据用户ID查询账单表，返回该用户的账单信息。
更新账单：实现更新账单的接口，前端传递账单ID和更新信息，后端验证Token中的用户ID与账单的用户ID是否一致，确保只能修改自己的账单。
删除账单：实现删除账单的接口，前端传递账单ID，后端验证Token中的用户ID与账单的用户ID是否一致，确保只能删除自己的账单。
Token验证：

在每个需要用户认证的接口中，添加Token验证逻辑，确保请求来自已登录用户，并从Token中解析出用户ID用于后续操作。
前端部分
封装请求函数：

封装通用的请求函数，确保除了登录接口外，其他接口请求时自动携带Token。
登录与Token存储：

实现登录功能，登录成功后，将后端返回的Token存储在本地（如localStorage或sessionStorage）。
账单信息展示与操作：

获取账单信息：在用户登录后，调用获取账单信息的接口，将返回的账单信息展示在页面上。
创建账单：提供表单让用户输入账单信息，调用创建账单的接口，成功后刷新账单列表。
更新账单：在账单列表中提供编辑按钮，点击后弹出表单显示当前账单信息，用户修改后调用更新账单的接口，成功后刷新账单列表。
删除账单：在账单列表中提供删除按钮，点击后调用删除账单的接口，成功后刷新账单列表。
示例代码
后端示例（Spring Boot）

java
// 登录接口
@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody User user) {
    // 验证用户信息
    User authenticatedUser = userService.authenticate(user);
    if (authenticatedUser != null) {
        // 生成Token
        String token = JwtUtil.generateToken(authenticatedUser.getId());
        return ResponseEntity.ok(new AuthResponse(token));
    }
    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build();
}

// 获取账单接口
@GetMapping("/bills")
public ResponseEntity<?> getBills(@RequestHeader("Authorization") String token) {
    String userId = JwtUtil.getUserIdFromToken(token);
    List<Bill> bills = billService.getBillsByUserId(userId);
    return ResponseEntity.ok(bills);
}

// 创建账单接口
@PostMapping("/bills")
public ResponseEntity<?> createBill(@RequestBody Bill bill, @RequestHeader("Authorization") String token) {
    String userId = JwtUtil.getUserIdFromToken(token);
    bill.setUserId(userId);
    billService.createBill(bill);
    return ResponseEntity.status(HttpStatus.CREATED).build();
}

前端示例（Vue）

javascript

// 登录
async login() {
    const response = await axios.post('/api/login', this.user);
    localStorage.setItem('token', response.data.token);
    this.fetchBills();
}

// 获取账单
async fetchBills() {
    const token = localStorage.getItem('token');
    const response = await axios.get('/api/bills', {
        headers: { Authorization: token }
    });
    this.bills = response.data;
}

// 创建账单
async createBill() {
    const token = localStorage.getItem('token');
    await axios.post('/api/bills', this.newBill, {
        headers: { Authorization: token }
    });
    this.fetchBills();
}

Answer 3

主流权限设计模型 RBAC 和 ACL
https://www.jianshu.com/p/ab5fa3ec25fd

若依框架，只有菜单按钮和接口权限

bladex框架，有数据权限

如果只是简单自定义数据权限，那就通过创建人判断查询
比如创建一个我的订单列表接口 myOrderList，然后根据传入 token判断获取当前人，将当前人传入sql 条件用创建人判断。

推荐：
阿里巴巴 Java开发手册