Cookie和tRPC

Question

我很难理解如何使用tRPC处理cookie。

我特别困惑如何从服务器上发送cookie，然后如何从res读取cookie。我发现关于GitHub cookie的每一个SO和tRPC帖子都没有帮助。

下面是我的代码示例，您可以知道我在哪里。

如有任何澄清问题，请随时提出。

// backend/index.ts

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(cors());

app.use(cookieParser())

app.use(
  "/login/v1",
  trpcExpress.createExpressMiddleware({
    router: loginRouter,
    createContext: createLoginContext
  })
);
app.listen(PORT, () => console.log(`server is running on port ${PORT}`));

// backend/router.ts

export async function createLoginContext({req,res}: trpcExpress.CreateExpressContextOptions) {
  
  return {
    req,
    res
  }
}

export type LoginContext = trpc.inferAsyncReturnType<typeof createLoginContext>

export const loginRouter = trpc.router<LoginContext>()
.mutation('testCookies', {
  async resolve({ctx, input}):Promise<any> {
    console.log(ctx.req.cookies);
    ctx.res.cookie('I set this cookie','cooookkiiieee')
    return ??
  }
});

// client/requests.ts

const createLoginRouter = () => {
    return createTRPCClient<LoginRouter>({
      url: "http://localhost:5000/login/v1",
      headers: {
         // use universal cookie to set a cookie property? 
      }

    })
}

export const testCookiesRequest = async() => {
  const client = createLoginRouter() 
  try {
    const val = await client.mutation('testCookies')
    return val
  } catch(e) {
    throw e
  }
}

Answer 1

佩里

不确定是否有此修复，但如果有帮助，我设法用这种方式设置了一个使用会话cookie的快捷服务器。

在您的服务器中，您需要使用这样的凭据初始化cors。

app.use(cors({credentials: true}))

然后，需要将快速会话添加到上下文中。你可以像这样组合你的上下文。这将确保进入服务器的请求具有会话和cookie。

import { CreateExpressContextOptions } from '@trpc/server/adapters/express'
import { Request } from 'express'
import session from 'express-session'

type ExpressRequest = Omit<CreateExpressContextOptions, 'req'> & {
  req: Request & { session: Session }
}

export const createContext = ({
  req,
  res,
}: ExpressRequest) => {
  return {
    req,
    res
  }
}

export type Context = inferAsyncReturnType<typeof createContext>

最后，对于应用程序中使用trpc的某些地方，请将凭据设置为include。

return httpBatchLink({
      url: `${getBaseUrl()}/api`,
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: 'include',
        })
      },
    })

我希望这能帮到你。