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

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

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

前端：

前端不登录如何直接访问

如果是前端页面可以在src/permission.js配置whiteList属性白名单即可。

后端:

方法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'),
    hidden: true
  },
  {
    path: '/massend',
    component: () => import('@/views/yangdong/massend'),
    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>
      第一个div：21312312312
    div>
    <div>
      第二个div：
      <iframe src="../centerprofile/index.vue" style="width: 30%;height: 500px">iframe>
      <iframe src="https://www.baidu.com/?tn=62095104_27_oem_dg&ch=1" style="width: 30%;height: 500px">iframe>
      <p v-html="htmlContent">p>
    div>
    <div>
      第三个div
      <iframe src="http://localhost/massend" style="width: 30%;height: 500px">iframe>
    div>
  div>
template>

<script>
export default {
  name: "Index",
  data() {
    return {
      htmlContent: ''
    };
  },
  mounted() {
    // 在组件挂载时将HTML内容加载到htmlContent中
    //this.loadHtmlFile();
  },
  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.baidu.com/?tn=62095104_27_oem_dg&ch=1） 访问时，发现不用登录

所以这个就需要注意了