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

最新推荐文章于 2024-09-07 21:11:23 发布

IT 青年

最新推荐文章于 2024-09-07 21:11:23 发布

阅读量723

点赞数 15

文章标签： spring boot vue.js 后端权限管理

本文链接：https://blog.csdn.net/m0_73399576/article/details/140809952

版权

前言

在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 {  
                    // 处理其他错误  
                }  
            });  
    }  
}