rw941123 2023-03-28 19:33 采纳率: 80%
浏览 29
已结题

不同用户登录看见不同菜单界面

请问如果我要实现role = 1的时候加载对应主菜单user以及下方的子菜单,然后role = 2的时候加载对应主菜单admin以及下方的子菜单,这样应该要怎么写呢?可以在index的路由守卫里写吗?
我的前端菜单代码如下:

<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.title}}</span>
            </template>
            
            <el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id" @click="savePath(it.path)">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{it.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
 


后端菜单相关代码如下:


public class MainMenu {
    private int id;
    private String title;
    private String path;
    private List<SubMenu> sList;
 
public class SubMenu {
    private int id;
    private String  title;
    private String path;
 
public List<MainMenu> getMenus();
 
 <resultMap id="menuMap" type="com.bishe.springboot.bean.MainMenu">
        <id column="id" property="id"/>
        <result column="title" property="title"/>
        <result column="path" property="path"/>
        <collection  property="sList" ofType="com.bishe.springboot.bean.SubMenu" javaType="java.util.List">
            <result column="sid" property="id"/>
            <result column="stitle" property="title"/>
            <result column="spath" property="path"/>
        </collection>
    </resultMap>
 
    <select id="getMenus" resultMap="menuMap">
        SELECT mm.*,sm.id as sid ,sm.title as stitle,sm.path as spath FROM
        mainmenu mm ,submenu sm WHERE mm.id = sm.mid;
    </select>
 
@RequestMapping("/menus")
    public String getAllMenus(){
        HashMap<String,Object> data = new HashMap<>();
        List<MainMenu> menus = menuDao.getMenus();
        if (menus!=null){
            data.put("menus",menus);
            data.put("flag",200);
        }else {
            data.put("flag",404);
        }
        String s = JSON.toJSONString(data);
        return s;
    }
 

router index.js代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import login from '../views/login.vue'
import welcome from '../views/welcome.vue'
import user_manage from '../views/admin/user_manage.vue'
import worker_manage from "../views/admin/worker_manage.vue"
import info_manage from "../views/admin/info_manage.vue"
import apply_manage from "../views/admin/apply_manage.vue"
import donate_manage from "../views/admin/donate_manage.vue"
import in_manage from "../views/admin/in_manage.vue"
import out_manage from "../views/admin/out_manage.vue";
import stock_manage from "../views/admin/stock_manage.vue";
import instock from "../views/employee/instock.vue"
import outstock from "../views/employee/outstock.vue";
import stockflow from "../views/employee/stockflow.vue";
import iteminfo from "../views/user/iteminfo.vue";
import apply from "../views/user/apply.vue";
import donate from "../views/user/donate.vue"
import message from "../views/user/message.vue";
import message_worker from "../views/employee/message_worker.vue";
import message_admin from "../views/admin/message_admin.vue";

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    redirect:"/login"
  },
  {
    path: "/login",
    component: login
  },
  {
    path: '/Home',
    component: Home,
    redirect: "/welcome",
    children:[
      {path:'/welcome',component: welcome,},
      {path:'/userhome',component: welcome,},
      {path:'/workerhome',component: welcome,},
      {path:'/usermanage',component: user_manage,},
      {path:'/workermanage',component: worker_manage,},
      {path:'/infomanage',component: info_manage,},
      {path:'/applymanage',component: apply_manage,},
      {path:'/donatemanage',component: donate_manage,},
      {path:'/inmanage',component: in_manage,},
      {path:'/outmanage',component: out_manage,},
      {path:'/stockmanage',component: stock_manage,},
      {path:'/instock',component: instock,},
      {path:'/outstock',component: outstock,},
      {path:'/itemflow',component: stockflow,},
      {path:'/stock',component: stock_manage,},
      {path:'/iteminfo',component: iteminfo,},
      {path:'/apply',component: apply,},
      {path:'/donate',component: donate,},
      {path:'/message',component: message,},
      {path:'/messagemanage',component: message_admin,},
      {path:'/comment',component: message_worker,},
    ]
  },

]

const router = new VueRouter({
  routes
})

//路由导航守卫
router.beforeEach((to,from,next)=>{
  //to 将要访问
  //from 从哪访问
  //next 接着做
  if(to.path=='/login')return next();
  //获取user
  const userFlag = window.sessionStorage.getItem("user");
  if (!userFlag)return  next('/login');
  next();
})

export default router


  • 写回答

1条回答 默认 最新

  • bilal-abdurehim 2023-03-28 19:58
    关注

    您可以在路由守卫的 next() 函数中传递一个对象,该对象可以包含 pathquery 等属性,用于指定用户的角色和需要加载的菜单。例如:

    router.beforeEach((to, from, next) => {
      const userRole = window.sessionStorage.getItem('userRole');
      if (userRole === '1') {
        next({ path: '/userhome', query: { menu: 'user' } });
      } else if (userRole === '2') {
        next({ path: '/userhome', query: { menu: 'admin' } });
      } else {
        next('/login');
      }
    });
    

    然后,您可以使用 this.$route.query.menu 来获取 menu 参数,并根据不同的值来渲染不同的菜单和子菜单。

    另外,您需要在后端根据用户的角色返回不同的菜单数据,例如:

    public List<MainMenu> getMenusByRole(int role) {
      // 查询数据库,根据角色返回不同的菜单数据
    }
    

    最后,您可以在前端使用 axios 发送请求获取菜单数据,并将其存储在 vuex 中,以便在不同的组件中使用。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 4月8日
  • 已采纳回答 3月31日
  • 创建了问题 3月28日

悬赏问题

  • ¥15 帮我解决一下膳食平衡的线性规划模型的数据实例
  • ¥40 万年历缺少农历,需要和阳历同时显示
  • ¥250 雷电模拟器内存穿透、寻基址和特征码的教学
  • ¥200 比特币ord程序wallet_constructor.rs文件支持一次性铸造1000个代币,并将它们分配到40个UTXO上(每个UTXO上分配25个代币),并设置找零地址
  • ¥15 关于Java的学习问题
  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因