navleft

Tecode 發(fā)布于2019-08-26 10:35 / 533人閱讀

摘要：判斷當(dāng)前登陸用戶對(duì)是否有權(quán)限如果當(dāng)前用戶是如果當(dāng)前是公開的當(dāng)前用戶有此的權(quán)限有沒有中如果當(dāng)前用戶有此的某個(gè)子的權(quán)限根據(jù)的數(shù)據(jù)數(shù)組生成對(duì)應(yīng)的標(biāo)簽數(shù)組使用遞歸調(diào)用根據(jù)的數(shù)據(jù)數(shù)組生成對(duì)應(yīng)的標(biāo)簽數(shù)組使用遞歸調(diào)用得到當(dāng)前請(qǐng)求的路由路徑如果當(dāng)前用戶

class LeftNav extends Component {

/*
判斷當(dāng)前登陸用戶對(duì)item是否有權(quán)限
*/
hasAuth = (item) => {

const {key, isPublic} = item

const menus = memoryUtils.user.role.menus
const username = memoryUtils.user.username
/*
1. 如果當(dāng)前用戶是admin
2. 如果當(dāng)前item是公開的
3. 當(dāng)前用戶有此item的權(quán)限: key有沒有menus中
 */
if(username==="admin" || isPublic || menus.indexOf(key)!==-1) {
  return true
} else if(item.children){ // 4. 如果當(dāng)前用戶有此item的某個(gè)子item的權(quán)限
  return !!item.children.find(child =>  menus.indexOf(child.key)!==-1)
}

return false

}

/*
根據(jù)menu的數(shù)據(jù)數(shù)組生成對(duì)應(yīng)的標(biāo)簽數(shù)組
使用map() + 遞歸調(diào)用
*/
getMenuNodes_map = (menuList) => {

return menuList.map(item => {
 
  if(!item.children) {
    return (
      
        
          
          {item.title}
        
      
    )
  } else {
    return (
      
          
          {item.title}
        
        }
      >
        {this.getMenuNodes(item.children)}
      
    )
  }

})

}

/*
根據(jù)menu的數(shù)據(jù)數(shù)組生成對(duì)應(yīng)的標(biāo)簽數(shù)組
使用reduce() + 遞歸調(diào)用
*/
getMenuNodes = (menuList) => {

// 得到當(dāng)前請(qǐng)求的路由路徑
const path = this.props.location.pathname

return menuList.reduce((pre, item) => {

  // 如果當(dāng)前用戶有item對(duì)應(yīng)的權(quán)限, 才需要顯示對(duì)應(yīng)的菜單項(xiàng)
  if (this.hasAuth(item)) {
    // 向pre添加
    if(!item.children) {
      pre.push((
        
          
            
            {item.title}
          
        
      ))
    } else {

      // 查找一個(gè)與當(dāng)前請(qǐng)求路徑匹配的子Item
      const cItem = item.children.find(cItem => path.indexOf(cItem.key)===0)
      // 如果存在, 說明當(dāng)前item的子列表需要打開
      if (cItem) {
        this.openKey = item.key
      }


      // 向pre添加
      pre.push((
        
          
          {item.title}
        
          }
        >
          {this.getMenuNodes(item.children)}
        
      ))
    }
  }

  return pre
}, [])

}

/*
在第一次render()之前執(zhí)行一次
為第一個(gè)render()準(zhǔn)備數(shù)據(jù)(必須同步的)
*/
componentWillMount () {

this.menuNodes = this.getMenuNodes(menuList)

}

render() {

// debugger
// 得到當(dāng)前請(qǐng)求的路由路徑
let path = this.props.location.pathname
console.log("render()", path)
if(path.indexOf("/product")===0) { // 當(dāng)前請(qǐng)求的是商品或其子路由界面
  path = "/product"
}

// 得到需要打開菜單項(xiàng)的key
const openKey = this.openKey

return (
  
    
      
      硅谷后臺(tái)
    

    

      {
        this.menuNodes
      }

    
  
)

}
}

/*
withRouter高階組件:
包裝非路由組件, 返回一個(gè)新的組件
新的組件向非路由組件傳遞3個(gè)屬性: history/location/match
*/
export default withRouter(LeftNav)