navleft

Tecode 发布于2019-08-26 10:35 / 460人阅读

摘要：判断当前登陆用户对是否有权限如果当前用户是如果当前是公开的当前用户有此的权限有没有中如果当前用户有此的某个子的权限根据的数据数组生成对应的标签数组使用递归调用根据的数据数组生成对应的标签数组使用递归调用得到当前请求的路由路径如果当前用户

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)

服务器托管云服务器 navleft

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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