Ruoyi后台系统前端在每一次提交请求时将菜单ID 提交到后端服务

我们使用的ruoyi vie.js+elementui 的后台系统的前端工程现在有一个需求每一次页面提交请求时要将菜单ID提交到后端服务做列权限管理需要请我有知道怎样能实现吗

ID丢请求头，然后拦截事件里处理下

不知道你这个问题是否已经解决, 如果还没有解决的话:

以下回答来自chatgpt:

由于Ruoyi后台系统前端是基于vue.js和elementui构建的，因此我们可以在Vue组件中实现将菜单ID提交到后端服务的功能。具体实现步骤如下：

在需要提交菜单ID的页面的Vue组件中定义一个data属性menuId用于存储菜单ID，如：

export default {
  data () {
    return {
      menuId: ''
    }
  },
  // ...
}

在使用菜单的地方添加一个点击事件，用于将当前菜单的ID赋值给menuId属性，如：

<el-menu-item index="1" @click="selectMenu(1)">
  <i class="el-icon-menu"></i>
  <span>菜单1</span>
</el-menu-item>

methods: {
  selectMenu(menuId) {
    this.menuId = menuId;
    // ...
  }
  // ...
}

在Axios请求拦截器中添加一个处理函数，在每次请求前将menuId值添加到请求header中，如：

import axios from 'axios';
import store from '@/store';

axios.interceptors.request.use(config => {
  const token = store.getters.token;
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  if (this.menuId) {
    config.headers['menuId'] = this.menuId;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

在后台服务的Controller中添加一个处理函数，用于获取header中的menuId值，如：

@Controller
public class MenuController {
  @Autowired
  private IMenuService menuService;

  @PostMapping("/menu")
  public void addMenu(@RequestBody Menu menu, HttpServletRequest request) {
    String menuId = request.getHeader("menuId");
    // ...
  }
  // ...
}

注意：以上代码仅为示例，具体实现需要根据实际情况进行调整。

另外，如果不是每个页面都需要提交菜单ID，可以考虑在路由钩子函数中添加一个处理函数，根据路由信息判断是否需要提交菜单ID。例如：

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    if (store.getters.token) {
      if (to.meta.menuId) {
        Vue.prototype.$menuId = to.meta.menuId;
      }
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

上述代码中，我们通过to.meta.menuId获取路由信息中的menuId值，并将其添加到Vue.prototype中，这样在组件中就可以直接使用this.$menuId获取menuId值了。在后台服务中的处理函数中，可以通过request.getHeader("menuId")获取到menuId值。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

Ruoyi后台系统前端 在每一次提交请求时将菜单ID 提交到后端服务

Ruoyi后台系统前端在每一次提交请求时将菜单ID 提交到后端服务