若依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) 访问时,发现不用登录
所以这个就需要注意了