开发喵星球

1. 和后端没有交互的前端页面

和后端没有交互的前端页面可以在src/permission.js配置whiteList属性白名单即可。

1. 新增页面

在views页面新增vue文件massend.vue

<template>
    <el-calendar v-model="value">
    </el-calendar>
</template>

<script>
  export default {
    data() {
      return {
        value: new Date()
      }
    }
  }
</script>

2. 添加路由

{
  path: '/massend',
  component: () => import('@/views/kaifamiao/massend'),
  hidden: true
},

3.添加到路由白名单

位置：src/permission.js

// 新增白名单路由
const newRoutes = [ "/center", "/massend"]
// 使用扩展运算符添加白名单路由
whiteList.push(...newRoutes)

访问页面

2. 与后端有交互的页面

2.1 前端操作

1. 添加页面路由，文件位置在route/index.js

{
path: '/system/user',
component: () => import('@/views/system/user/profile/index'),
hidden: true
},

1.2 添加白名单,文件位置：src/permission.js

const whiteList = ['/login', '/register', '/system/user','/user']

1.3 取消拦截器，文件位置：src/utils/request.js

将响应拦截器相关代码注释

注意：
1. 因为没有登录，不注释会有消息弹窗
2. 清注释，不要删除

2.2 后端操作

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

// 使用 permitAll() 方法所有人都能访问，包括带上 token 访问
.antMatchers("/system/user/**").permitAll()

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

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

// 类上定义匿名注解，作用于所有的方法
@Anonymous
@RestController
@RequestMapping("/system/xxxx")
public class SysXxxxController extends BaseController
{
}

// 方法定义匿名注解，作用于单独的方法
@Anonymous
@GetMapping("/list")
public List<SysXxxx> list(SysXxxx xxxx)
{
    return xxxxList;
}

2.3 结果查看

注意：由于数字字典dict的限制，直接从后端获取数据或会报错。

💪推荐：登录请求后端直接获取当前用户的token，然后返回前端，在前端login.vue中获取token，然后路由跳转至/index或其他页面。

⚠️请注意，本文提及的代码示例仅供参考，实际实现方式可能会因若依项目版本不同而略有差异。
本文基于RuoYi v3.8.8​