navleft

Tecode 發布于2019-08-26 10:35 / 543人閱讀

摘要：判斷當前登陸用戶對是否有權限如果當前用戶是如果當前是公開的當前用戶有此的權限有沒有中如果當前用戶有此的某個子的權限根據的數據數組生成對應的標簽數組使用遞歸調用根據的數據數組生成對應的標簽數組使用遞歸調用得到當前請求的路由路徑如果當前用戶

class LeftNav extends Component {

/*
判斷當前登陸用戶對item是否有權限
*/
hasAuth = (item) => {

const {key, isPublic} = item

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

return false

}

/*
根據menu的數據數組生成對應的標簽數組
使用map() + 遞歸調用
*/
getMenuNodes_map = (menuList) => {

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

})

}

/*
根據menu的數據數組生成對應的標簽數組
使用reduce() + 遞歸調用
*/
getMenuNodes = (menuList) => {

// 得到當前請求的路由路徑
const path = this.props.location.pathname

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

  // 如果當前用戶有item對應的權限, 才需要顯示對應的菜單項
  if (this.hasAuth(item)) {
    // 向pre添加
    if(!item.children) {
      pre.push((
        
          
            
            {item.title}
          
        
      ))
    } else {

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


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

  return pre
}, [])

}

/*
在第一次render()之前執行一次
為第一個render()準備數據(必須同步的)
*/
componentWillMount () {

this.menuNodes = this.getMenuNodes(menuList)

}

render() {

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

// 得到需要打開菜單項的key
const openKey = this.openKey

return (
  
    
      
      硅谷后臺
    

    

      {
        this.menuNodes
      }

    
  
)

}
}

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

GPU云服務器云服務器 navleft

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106424.html

原生js實現移動端+pc端輪播插件

摘要：原生寫的輪播兼容移動端插件，支持輪播速度，輪播內容，輪播間隔，手勢靈敏度自定義，導航圓點點擊跳轉手勢滑動。使用說明文件包含小部分語法編寫的文件，在移動端有兼容性問題，僅供于源碼參考。移動端跟端開發引用文件直接下載進行引入使用。 slide.js 原生js寫的輪播兼容 pc+移動端插件，支持輪播速度，輪播內容，輪播間隔，手勢靈敏度自定義，導航圓點點擊跳轉,手勢滑動。使用說明：sli...

leanxi 2019-08-22 16:25 評論0 收藏0
45個實用的JavaScript小貼士、小技巧和最佳實踐

摘要：翻譯正文第一次聲明變量時，請不要忘記使用關鍵字聲明使用代替空字符串轉成布爾值都為每行代碼的末尾最好都加上個分號最好給對象都添加上構造函數在使用和盡量小心。翻譯介紹翻譯標題：45 Useful JavaScript Tips, Tricks and Best Practices 翻譯來源：http://modernweb.com/2013/12/23/45-useful-java...

Moxmi 2019-08-14 11:56 評論0 收藏0
【譯】45種Javascript技巧大全

摘要：對進行序列化和反序列化避免使用和構造函數使用和構造函數是非常昂貴的操作，因為每次他們都會調用腳本引擎將源代碼轉換成可執行代碼。原文：45 Useful JavaScript Tips, Tricks and Best Practices 譯文：45個有用的JavaScript技巧，竅門和最佳實踐譯者：dwqs 在這篇文章中，我將分享一些JavaScript常用的技巧，竅門和最...

hufeng 2019-08-21 10:25 評論0 收藏0
JavaScript編程注意事項、技巧大全

摘要：數組元素刪除應使用。用來序列化與反序列化結果為的值與對象相同不要使用或者函數構造器和函數構造器的開銷較大，每次調用，引擎都要將源代碼轉換為可執行的代碼。收藏自 JavaScript奇技淫巧45招 JavaScript是一個絕冠全球的編程語言，可用于Web開發、移動應用開發（PhoneGap、Appcelerator）、服務器端開發（Node.js和Wakanda）等等。JavaSc...

Shimmer 2019-08-21 10:24 評論0 收藏0
45 個實用的 JavaScript 技巧、竅門和最佳實踐

摘要：使用閉包實現私有變量譯者添加未在構造函數中初始化的屬性在語句結尾處使用分號在語句結尾處使用分號是一個很好的實踐。總結我知道還有很多其他的技巧，竅門和最佳實踐，所以如果你有其他想要添加或者對我分享的這些有反饋或者糾正，請在評論中指出。 showImg(http://segmentfault.com/img/bVbJnR); 如你所知，JavaScript是世界上第一的編程語言(編者注：2...

魏憲會 2019-08-21 12:06 評論0 收藏0