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）角色權限關係表