diff --git a/src/index.ts b/src/index.ts
index cfdbe33..0ec6c15 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 import { adapter } from './adapter.ts';
-export { QueryWs } from './ws.ts';
+import { QueryWs } from './ws.ts';
+export { QueryOpts };
 type Fn = (opts: {
   url?: string;
   headers?: Record<string, string>;
@@ -37,6 +38,8 @@ type DataOpts = Partial<QueryOpts> & {
  *   path: 'demo',
  *   key: '1',
  *  });
+ *
+ * U是参数 V是返回值
  */
 export class Query<U = any, V = any> {
   adapter: typeof adapter;
@@ -86,5 +89,39 @@ export class Query<U = any, V = any> {
     this.afterResponse = fn;
   }
 }
+/**
+ * 前端调用后端QueryRouter
+ */
+export class QueryClient<U = any, V = any> extends Query<U, V> {
+  tokenName: string;
+  storage: Storage;
+  token: string;
+  qws: QueryWs;
+  constructor(opts?: QueryOpts & { tokenName?: string; storage?: Storage }) {
+    super(opts);
+    this.tokenName = opts?.tokenName || 'token';
+    this.storage = opts?.storage || localStorage;
+    this.beforeRequest = async (opts) => {
+      const token = this.token || this.getToken();
+      if (token) {
+        opts.headers = {
+          ...opts.headers,
+          Authorization: `Bearer ${token}`,
+        };
+      }
+      return opts;
+    };
+    this.qws = new QueryWs({ url: opts?.url });
+  }
+  getToken() {
+    return this.storage.getItem(this.tokenName);
+  }
+  saveToken(token: string) {
+    this.storage.setItem(this.tokenName, token);
+  }
+  removeToken() {
+    this.storage.removeItem(this.tokenName);
+  }
+}
 
 export { adapter };
diff --git a/src/ws.ts b/src/ws.ts
index 3b79a6d..190852a 100644
--- a/src/ws.ts
+++ b/src/ws.ts
@@ -58,6 +58,7 @@ export class QueryWs {
     };
     ws.onclose = () => {
       store.getState().setConnected(false);
+      store.getState().setStatus('disconnected');
       this.ws = null;
     };
   }