版本
RuoYiCloudPlusv2.1.2
plus-uiVue3 ts

以新增一个公开的课程搜索页面为例。

一、前端

1. 组件创建

在view目录下创建一个页面的vue代码,比如

src/views/customer/searchPage/index.vue

2. src/router/index.ts

为其编制一个路由。在constantRoutes中添加一组dict信息。比如

{
    path: '/courseSearch',
    component: () => import('@/views/customer/searchPage/index.vue'),
    hidden: true
},

3. src/permission.ts

把页面加入前端的whiteList

const whiteList = [
  '/login',
  '/register',
  '/social-callback',
  '/courseSearch'
];

在浏览器输入http://localhost/courseSearch,至此这个页面已经不用登录就可以访问了。

二、后端

但是后端是有网关和认证模块的,虽然前端页面可以不用登陆了,但是如果这个页面还需要从后端获取数据,那么后端对应的controller也应该被open。

1. 设计思想

不同模块有不同的url前缀,比如

routes:
   # 认证中心
   - id: ruoyi-auth
     uri: lb://ruoyi-auth
     predicates:
       - Path=/auth/**
     filters:
       - StripPrefix=1
   # 代码生成
   - id: ruoyi-gen
     uri: lb://ruoyi-gen
     predicates:
       - Path=/tool/**
     filters:
       - StripPrefix=1

并且每个模块都有可能需要open一些controller,不需要认证。那么我们进行统一设定,比如课程模块,url前缀为course,那么/course/open/**就都是被公开的端点。于是在gateway只需要把/*/open/**加入白名单即可。

2. ruoyi-gateway.yml

在nacos中修改gateway的配置文件,把/*/open/**加入whites。

security:
	ignore:
		whites:
			- /auth/code
			- /auth/logout
			- /auth/login
			- /auth/binding/*
			- /auth/social/callback
			- /auth/register
			- /auth/tenant/list
			- /resource/sms/code
			- /*/v3/api-docs
			- /*/error
			- /csrf
			- /*/open/**

3. 开发Controller

在course模块中,新建一个CourseOpenController.java,内容示例如下

package org.dromara.course.controller;

import org.dromara.course.domain.bo.CourseCategoryBo;
import org.dromara.course.domain.vo.CourseCategoryVo;
import org.dromara.course.service.CourseCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/open")
public class CourseOpenController {

    @Autowired
    CourseCategoryService categoryService;


    @GetMapping("/category/list")
    public List<CourseCategoryVo> list(CourseCategoryBo bo) {
        return categoryService.queryList(bo);
    }


}

重启网关和课程模块即可。

在这里插入图片描述

Logo

快速构建 Web 应用程序

更多推荐