Ant Design Pro of Vue 自制路由權限

自制頁面跳轉的權限

（以下代碼放在基礎元件中：src/layouts/BasicLayout.vue）

1、聲明一個對象，對象中要包含項目的所有路由，并根據菜單名分類

export const powerList = {
	//  基礎路由，所有使用者都給
    basic:[
      '/','/index','/403','/404','/500'
    ],
    //  根據菜單名給對應路由
    process:[
      '/process/process-list',
      '/process/create-process',
      '/process/approval-list',
      '/process/calendar-list',
      。。。more
    ],
    dataBase:[
      '/database/buy',
      '/database/stop-buy',
      '/database/counter',
      '/database/suShiControl',
      。。。more
    ],
    。。。more
  }
           

2、從接口中拿到動态菜單

created () {
    axios('菜單接口',{}).then((res)=>{
      //  生成權限數組
      this.setPowerList(res)
    })
  },
           

setPowerList(res){
  //  将接口資料中的所有菜單名字取出來
  let list = res.data
  let list2 = []
  for(let i in list){
    list2.push(list[i].name)
  }
  //  聲明一個數組，并給基礎權限
  let currentList = powerList['basic']
  //  将對應菜單名的路由全部放入到聲明的數組中
  for(let i in list2){
    let a = list2[i]
    let list3 = powerList[a]
    currentList = currentList.concat(list3)
  }
  //  currentList 為此使用者所能夠跳轉的所有路由
  this.currentList = currentList
  this.judgmentAuthority(this.$route.path)
}
           

3、在基礎元件中監聽路由

watch: {
    "$route":function(to,from){
      this.judgmentAuthority(to.fullPath)
    }
  },
           

4、目前路由不在currentList裡時，頁面跳轉403

judgmentAuthority(fullPath){
      let currentList = this.currentList
      //  截取路由，去掉路由中的參數
      let path = fullPath.split('?')[0]
      if(currentList.indexOf(path)<0){
        this.$router.push({path:"/403"})
      }
    },