Spring Boot + Vue（4）授权查看信息

2024/11/30 14:52:11 来源：https://blog.csdn.net/m0_73399576/article/details/140809952 浏览: 次关键词：Spring Boot + Vue（4）授权查看信息

前言

在SpringBoot和Vue的组合中，实现一个查看商品详情信息需商品主人授权的功能，涉及到前后端的协作以及权限管理的设计。以下是一个基本的实现步骤和概念介绍：

一. 设计数据库模型

首先，你需要设计数据库模型来存储商品信息、用户信息以及商品和用户之间的授权关系。例如：

商品表（Products）：包含商品ID、商品名称、描述、价格等信息。
用户表（Users）：包含用户ID、用户名、密码（加密存储）、邮箱等信息。
授权表（Authorizations）：包含商品ID、用户ID（商品主人）和授权用户ID（被授权查看商品详情的用户）。这个表用于记录哪些用户被授权查看哪些商品的详情。

二. SpringBoot后端实现

2.1 权限验证接口

在SpringBoot中，你可以创建一个API来检查用户是否有权查看特定商品的详情。这个API会接收商品ID和用户ID作为参数，然后查询授权表来验证用户是否有权访问。

@RestController  
@RequestMapping("/api/products")  
public class ProductController {  @Autowired  private ProductService productService;  @GetMapping("/{productId}/detail")  public ResponseEntity<ProductDetail> getProductDetail(@PathVariable Long productId, @AuthenticationPrincipal UserDetails userDetails) {  User currentUser = userDetailsService.loadUserByUsername(userDetails.getUsername());  if (!productService.isAuthorized(productId, currentUser.getId())) {  return ResponseEntity.status(HttpStatus.FORBIDDEN).build();  }  ProductDetail detail = productService.getProductDetail(productId);  return ResponseEntity.ok(detail);  }  // 其他相关方法...  
}

2.2 授权管理

你还需要实现一个API来管理授权，比如添加或删除授权。

@PostMapping("/{productId}/authorize/{userId}")  
public ResponseEntity<?> authorizeProduct(@PathVariable Long productId, @PathVariable Long userId) {  // 逻辑：检查用户是否有权进行授权（比如是商品主人），然后更新授权表  // 返回成功或错误响应  
}  @DeleteMapping("/{productId}/revoke/{userId}")  
public ResponseEntity<?> revokeProductAccess(@PathVariable Long productId, @PathVariable Long userId) {  // 逻辑：从授权表中删除相应的条目  // 返回成功或错误响应  
}

三. Vue前端实现

3.1 请求商品详情

在Vue组件中，你可以使用Axios或其他HTTP客户端来调用SpringBoot后端提供的API，并显示商品详情。如果API返回403 Forbidden，则显示无权访问的消息。

methods: {  fetchProductDetail(productId) {  axios.get(`/api/products/${productId}/detail`)  .then(response => {  this.productDetail = response.data;  })  .catch(error => {  if (error.response.status === 403) {  alert('无权访问该商品详情');  } else {  // 处理其他错误  }  });  }  
}