js使用Proxy代理Class的公有方法初步尝试

js使用Proxy代理Class的公有方法初步尝试

最近遇到一个需求是在前端对api进行权限管控，由于项目中的api都是封装在不同的class中，具体代码如下。

import http from "../../network";
export class LoginApi {
  signin(body) {
    return http.post("/users/signin", body);
  }
  signout() {
    return http.get("/users/signout");
  }
  signup(body) {
    return http.post("/users", body);
  }
  isAuth() {
    return http.get("/users/isAuth");
  }
}

在每个页面都分别实例，调用公有方法请求api，对于权限管控考虑使用代理的方式来处理，代码尝试如下。

• 第一种方法考虑直接先实例化class，使用Proxy直接代理实例

class LoginApi {
    signin() {
      console.log("/users/signin");
    }
    signout() {
      console.log("/users/signout");
    }
    signup(body) {
      console.log("/users/");
    }
    isAuth() {
      console.log("/users/isAuth");
    }
  }
  export loginApi = new Proxy(new LoginApi(), {
    get: function (target, propKey, receiver) {
    //伪代码
      console.log(`getting ${propKey}!`);
      if(propKey === 'isAuth') {
        return () => { console.log('没有权限'); }
      }
      return Reflect.get(target, propKey, receiver);
    }
  })
//在页面调用
  loginApi.signin()
  loginApi.isAuth()

• 第二种考虑到构造器里this就是代理的目标，直接在构造函数里对this进行代理，在外部调用时使用代理后的proxy实例。

export class LoginApi {
   constructor () {
     this.proxyApi = new Proxy(this, {
       get(target, propKey, receiver) {
       //伪代码
         if(propKey === 'isAuth') {
           return () => { console.log('没有权限'); }
         }
         return Reflect.get(target, propKey, receiver);
       }
     })
   }
   signin() {
     console.log("/users/signin");
   }
   signout() {
     console.log("/users/signout");
   }
   signup(body) {
     console.log("/users/");
   }
   isAuth() {
     console.log("/users/isAuth");
   }
 }
// 外部调用
const loginApi = new LoginApi()
loginApi.proxyApi.isAuth()
loginApi.proxyApi.signout()

然而两种方法都感觉都不是很优雅，这里也有一个疑惑，如果一个class只有公有方法不存在私有属性，那这个class的实例化是否有意义？等以后研究出更好的方法再来更新，欢迎评论留言。