String Boot+Vue实现登录权限设置前后端实现

原創

2019-09-16 00:42

1.功能描述：用户登录成功后根据用户Id查找确定该用户的角色，根据用户获取该用户菜单列表，列表以层级的形式返回给前端，前端将得到的采用循环的方式显示在菜单栏。
2.时序图

3.流程：
（1）用户输入用户名、密码进行登录

（2）登录成功后显示首页，
（3）后端根据用户id获取菜单列表

<select id="getMenus" resultMap="BaseResultMap">
  select distinct
  mid,mcode,menu_name,url,icon
  from (tc_market_user u left join tc_market_user_role ur on u.uid = ur.user_id)
  left join tc_market_role_permission rp on rp.role_id = ur.role_id
  left join tc_market_menu m on m.mcode = rp.rpcode
  where uid = #{userId}
  order by m.mcode asc;
</select>

（4）前端获取后端传来的菜单列表，

sideMenu(){
      getMenus({userId : this.userId})
      .then( res =>{
        if(res.retCode === '000000'){     
          this.convert(res.data)
          this.data = res.data
          this.$router.push({path: '/index'});
        }
        else {
          this.$message({ 
            type: 'error',
            message: res.retMsg
          })
          this.$router.push({path: '/index'});
        }
      })
    },

将菜单列表渲染在el-menu中，

<el-menu class="el-menu-vertical-demo sider-menu"  @open="handleOpen" @close="handleClose"
      background-color="#ffffff" text-color="#0d0d0d" active-text-color="#fd5e4f" 
      :router="true" :unique-opened="true" :data="data">
    <!-- 一级菜单 -->
      <el-submenu v-for="item in data" :index="item.mid" :key="item.code" class="bottom-border">
        <template slot="title"><i :class="item.icon"></i><span>{{item.menuName}}</span></template>
        <!-- 二级菜单 -->
        <el-menu-item v-for="itemChild in item.children" :index="itemChild.url" :key="itemChild.url">
          <span slot="title">{{itemChild.menuName}}</span>
        </el-menu-item>
      </el-submenu>
  </el-menu>

4.数据库表如下：
（1）用户信息表

（2）角色信息表

（3）用户角色关系表

（4）菜单信息表

（5）角色权限关系表