基于vue-element-template项目开发总结（四）

这篇讲动态路由生成及权限管理，我做项目的时候其实也不是生成动态路由，感觉自己生成动态路由挺麻烦的，就换了一种思路，不同权限的管理员看到的侧边栏是不同的，然后侧边栏是根据我们写的路由表生成的

然后我们可以换一种思路，直接根据后台返回的数据操作侧边栏，这个就要跟后台协商好，在登录的时候根据不同的角色返回一个菜单列表，存入session中，我们根据这个菜单列表来生成侧边栏

然后在侧边栏的vue中取出来渲染

这样我们的路由权限也就做好了

接下来就是按钮权限

这个管理员权限设置就不多讲了，比较简单

我做的这个项目按钮权限是先跟后台协商好：1-7，各代表有哪些权限，在登录的时候返回，我们也在登录的时候先处理好数据

handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if(!valid) return;
          this.loading = true
          login({account:this.loginForm.username,pwd:this.loginForm.password}).then(res =>{
            if(res.code==200){
              this.loading = false
              window.sessionStorage.setItem("menuList",JSON.stringify(res.allRouter))
              // window.sessionStorage.setItem("menuList",JSON.stringify(res.allRouter))
              window.sessionStorage.setItem("token",res.token)
              const _data = res.allRouter
              let effectArr = []
              for(let i=0;i<_data.length;i++){
                let jsonMsg = {
                  path:'',
                  effective:''
                }
                if(!_data[i].effective){
                  if(_data[i].effective==0){
                    jsonMsg.effective = _data[i].children[0].effective
                  }else{
                    jsonMsg.effective = 7
                  }
                }else{
                  jsonMsg.effective = _data[i].effective
                }
                jsonMsg.path = _data[i].path
                effectArr.push(jsonMsg)
              }
              window.sessionStorage.setItem("effectList",JSON.stringify(effectArr))
              this.$message.success("登录成功")
              this.$router.push('/')
            }else{
              this.loading = false
              this.$message.error(res.msg)
            }
          }).catch(()=>{
            this.loading = false
          })
      })
    }

然后在自己的公共js文件中封装处理方法

export function checkEffect(path){
  const effectArr = JSON.parse(window.sessionStorage.getItem("effectList"))
  let effectNum
  let permission = {
    add:false,
    delete:false,
    edit:false
  }
  for(let i=0;i<effectArr.length;i++){
    if(path==effectArr[i].path){
      effectNum =  effectArr[i].effective
    }
  }
  switch (effectNum){
    case 1:
      permission.add = true
      break
    case 2:
      permission.delete = true
      break
    case 3:
      permission.add = true
      permission.delete = true
      break
    case 4:
      permission.edit = true
      break
    case 5:
      permission.add = true
      permission.edit = true
      break
    case 6:
      permission.delete = true
      permission.edit = true
      break
    case 7:
      permission.delete = true
      permission.edit = true
      permission.add = true
  }
  return permission
}


export default {
  randomString,
  getUserIP,
  CheckChinese,
  checkType,
  checkEffect
}

然后再需要做按钮权限的页面引入

mounted(){
      let btnP = uploadCommon.checkEffect('/bannerSettings')
      this.btnPermissions_add = btnP.add
      this.btnPermissions_delete = btnP.delete
      this.btnPermissions_edit = btnP.edit
  },

控制按钮显示隐藏

这样按钮权限就做好了