若依RuoYi-Vue分离版—免登录直接访问

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

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

前端：

前端不登录如何直接访问

第一步：首先在views目录下面创建你想免登录的页面

第二步：再去ruoyi-ui\src\router 的 index.js 的 constantRoutes （公共路由方）中 配置你创建的页面位置。

第三步：最后再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/） ，不用登录

所以这个就需要注意了