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

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

• 官网说明：如何不登录直接访问
• • 前端：
  • 后端:
  • • 方法1：在`SecurityConfig.java`中设置`httpSecurity`配置匿名访问
    • 方法2：在对应的方法或类上面使用`@Anonymous`注解。
• 个人测试（菜单配置里面的页面 和 非菜单配置里面的页面）

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

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

前端：

前端不登录如何直接访问

如果是前端页面可以在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） 访问时，发现不用登录

所以这个就需要注意了