若依RuoYi-Vue分离版免登录访问功能实现指南

若依RuoYi-Vue分离版免登录访问功能实现指南

引用

CSDN

1.

https://blog.csdn.net/qq_20236937/article/details/139634849

若依RuoYi-Vue分离版是一款基于Spring Boot和Vue.js的前后端分离架构的开源后台管理系统。在实际开发中，有时需要实现某些页面或接口的免登录访问功能，例如公开的API或无需认证的页面。本文将详细介绍如何在若依RuoYi-Vue分离版中实现免登录直接访问的功能。

官网说明：如何不登录直接访问

前端：

前端不登录如何直接访问

1. 首先在views目录下面创建你想免登录的页面
2. 然后在ruoyi-ui\src\router的index.js文件中配置你创建的页面位置
3. 最后在src/permission.js文件中配置whiteList属性白名单（免登录页面的访问url）

后端：

方法1：在SecurityConfig.java中设置httpSecurity配置匿名访问

// 使用 permitAll() 方法所有人都能访问，包括带上 token 访问
.antMatchers("/admins/**").permitAll()
// 使用 anonymous() 所有人都能访问，但是带上 token 访问后会报错
.antMatchers("/admins/**").anonymous()

方法2：在对应的方法或类上面使用@Anonymous注解

前提：匿名访问的方法上面@PreAuthorize权限注解也需要去掉，因为已经使用匿名访问了，权限自然也不需要去验证了。

// 类上定义匿名注解，作用于所有的方法
@Anonymous
@RestController
@RequestMapping("/system/xxxx")
public class SysXxxxController extends BaseController
{
}
// 方法定义匿名注解，作用于单独的方法
@Anonymous
@GetMapping("/list")
public List<SysXxxx> list(SysXxxx xxxx)
{
    return xxxxList;
}

个人测试-前端页面

我这边没有单独写一个新页面了，用以前写的页面进行相关测试

测试了一下菜单配置里面的页面和非菜单配置里面的页面

1. 在ruoyi-ui\src\router路径下修改index.js文件

//该处为免登录访问的路由页面
{
  path: '/centerprofile',
  component: () => import('@/views/yangdong/centerprofile/index'),
  hidden: true
},
{
  path: '/massend',
  component: () => import('@/views/yangdong/terminal/fwfc/index'),
  hidden: true
},

2. 在src/permission.js配置whiteList属性白名单

//新的白名单路由
const newRoutes = ['/centerprofile', '/massend'];
// 使用扩展运算符合并数组
whiteList.push(...newRoutes);

3. 效果展现

3.1 访问地址：http://localhost/centerprofile（菜单管理里面的页面）

结果：成功实现了免登录展现页面

上图的“系统提示”是由于我的这个页面是代码生成器生成的，里面存在调用后台接口的方法

3.2 访问地址：http://localhost/massend（非菜单管理里面的页面）

这个页面的vue代码如下

<template>
  <div class="wrap">
    <div style="border: 1px solid red">
      第一个div：666777888
    </div>
    <div style="border: 1px solid yellow">
      第二个div：
      <iframe src="../centerprofile/index.vue" style="width: 30%;height: 500px"></iframe>
      <iframe src="https://www.csdn.net/" style="width: 60%;height: 500px"></iframe>
      <p v-html="htmlContent"></p>
    </div>
    <div style="border: 1px solid blue">
      第三个div
      <iframe src="http://localhost/massend" style="width: 60%;height: 1200px"></iframe>
    </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
  },
  methods: {
    loadHtmlFile() {
      this.htmlContent = "";
      let xhr = new XMLHttpRequest()
      // 线上链接地址
      // xhr.open("GET", val.url, false);
      console.log("xhr",xhr);
      // public文件夹下的绝对路径
      // /xhr.open("GET", "佛山招聘教师.txt", false);
      //xhr.open("GET", "群众首页.html", false);
      xhr.overrideMimeType("text/html;charset=utf-8")
      xhr.send(null)
      this.htmlContent = xhr.responseText;
    }
  },
};
</script>
<style lang="scss" scoped>
.wrap{
  width: 100%;
  height: 500px;
}
</style>

结果：也是成功实现了免登录展现页面

现象一：iframe内嵌内部页面访问时（…/centerprofile/index.vue） ，需要登录

现象二：iframe内嵌请求地址访问时（http://localhost/massend） ，不用登录

现象三：iframe内嵌请求地址访问时（https://www.csdn.net/） ，不用登录

所以这个就需要注意了