芋道源码yudao-cloud 二开日记（添加接口权限和页面固定路由）

在这篇文章中，我们将探讨如何在「芋道源码」的 yudao-cloud 项目中进行二次开发，以添加接口权限和页面固定路由。二次开发是指在已有系统的基础上，根据需求进行功能的扩展和修改。这在日常开发中是非常常见的需求，尤其是在面对特定业务时。

一、项目准备

在开始之前，确保你已经成功克隆了 yudao-cloud 项目，并能够在本地运行。接下来，我们将进行接口权限的添加和页面固定路由的配置。

二、添加接口权限

在 yudao-cloud 中，接口权限通常是通过权限注解来控制的。我们可以按以下步骤来添加接口权限。

1. 定义权限注解

首先，我们需要在项目中定义一个自定义权限注解。我们可以创建一个 Permission 注解，它接受一个字符串作为权限标识。

package com.yudao.framework.security.annotation;

import java.lang.annotation.ElementType;
import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;
import java.lang.annotation.Target;

@Target({ElementType.METHOD, ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
public @interface Permission {
    String value();
}

2. 修改Controller

接下来，我们将权限注解应用到一个 Controller 中。例如，以下是一个示例 Controller，其中添加了权限控制。

package com.yudao.module.system.controller;

import com.yudao.framework.security.annotation.Permission;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/example")
public class ExampleController {

    @Permission("example:view")
    @GetMapping("/view")
    public String viewExample() {
        return "示例内容";
    }
}

3. 权限拦截器

接下来，我们需要编写权限拦截器来处理这些注解。可以创建一个 PermissionInterceptor 类来拦截请求并验证用户的权限。

package com.yudao.framework.security.interceptor;

import com.yudao.framework.security.annotation.Permission;
import org.springframework.stereotype.Component;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@Component
public class PermissionInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if (handler instanceof HandlerMethod) {
            HandlerMethod method = (HandlerMethod) handler;
            Permission permission = method.getMethodAnnotation(Permission.class);
            if (permission != null) {
                String requiredPermission = permission.value();

                // TODO: 检查用户是否有 requiredPermission 这个权限
                // 如果没有权限，则返回403状态码
            }
        }
        return true;
    }
}

在这个拦截器中，我们将检查用户是否具有所需的权限。如果用户没有权限，我们将可以返回 403 禁止访问的响应。

三、配置页面固定路由

在现代的前端框架中，路由配置是一个十分重要的部分。以下是如何在 yudao-cloud 进行页面固定路由的一个简单示例。

1. 修改路由配置

假设我们使用的是 Vue.js 框架。在 src/router/index.js 文件中，我们将添加一个固定路由示例。

import Vue from 'vue';
import Router from 'vue-router';
import ExampleView from '@/views/ExampleView.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/example',
      name: 'Example',
      component: ExampleView,
      meta: {
        requiresAuth: true, // 需要认证
        permission: 'example:view' // 对应后端权限
      }
    }
  ]
});

在这个路由配置中，我们定义了一个路径为 /example 的路由，并指定了所需的权限。

2. 前端权限验证

在全局的路由守卫中，我们可以检查用户是否拥有访问该路由所需的权限。

router.beforeEach((to, from, next) => {
  const requiredPermission = to.meta.permission;
  if (requiredPermission) {
    // TODO: 进行权限验证，判断用户是否有 requiredPermission 权限
    // 如果没有权限，则重定向到403页面
  }
  next();
});

四、总结

通过上述步骤，我们成功添加了接口权限控制和页面固定路由的功能。这不仅提高了系统的安全性，也增强了用户体验。在实际的开发中，可以根据具体的需求进一步扩展这些功能，例如优化权限管理、动态路由生成等。希望这些示例能够帮助到你在「芋道源码」的开发中获得更大的进展！