分析vue-admin中关于权限的写法

后台管理系统的前端模板有很多 很多人都是拿来就用
但是作为一个有追求的前端，我们要分析其中的用法，并在我们自己的项目中应用起来，实现高度的定制化

以下是权限的核心代码

const whistlist=["/login"]
router.beforeEach(async(to,from,next)=>{
    NProgress.start()

    const hastoken=getToken() //从cookie中获取token

    if(hastoken){  //如果有token
        if (to.path === '/login') {
            // if is logged in, redirect to the home page
            next({ path: '/' })
            NProgress.done()
           }else{
      
            

                if(store.getters.roles && store.getters.roles.length > 0){  //如果权限roles 不为空
  
                     next()
        
        
                }else{  //如果为空   我们去获取用户信息和身份
                    
                     let roles_
                     await store.dispatch("get_userinfo").then((roles)=>{// 获取到当前用户的身份 
                        roles_=roles
                     })
                     // 然后拿着身份去筛选路由
                     let accessRoutes
                     await store.dispatch("generateRoutes",roles_).then((result)=>{
                          accessRoutes=result
                     })
               
                     router.addRoutes(accessRoutes)
                    // router.options.routes.push(accessRoutes)
                     //next()
                 
                      next({ ...to, replace: true })
        
        
                }

            }

     
   
    }else{// 如果没有token
         
        if(whistlist.indexOf(to.path)!==(-1)){  //如果在白名单中 允许
          
            next()
            
        }else{
            next("/login")
            NProgress.done()
        }



    }




 
})

roles是储存用户身份的数组 表示你是管理员 还是超级管理员
generateRoutes是拿着身份去过滤异步的路由 然后返回结果 和原来的路由合并
generateRoutes的函数如下

   generateRoutes(context,roles_){
         let result
          return new Promise((resolve,reject)=>{
              if(roles_==="admin"){//如果是超级管理员 就获取所有的异步路由
                  result=syncrouter
          
              }else{

                result=filter_router(syncrouter,roles_)
              }

         
              context.commit("SET_ROUTE",result)
              resolve(result)
          })




   }

其中的filter_router是关键 是递归过滤路由 代码如下 syncrouter是我们定义好的异步路由

export function filter_router(syncrouter,roles_){
          
      
      let result=[]; 

         
        syncrouter.forEach((value)=>{



        if(value.meta.roles.indexOf(roles_)!==(-1)){ // 如果包含权限
            if(value.children){
                value.children=filter_router(value.children,roles_)
               

            }
            result.push(value)

         }
 


        })

  
        return result



}