视频地址： https://www.bilibili.com/vide...
初始化我的项目
Remix 官网：https://remix.run/
创立命令：
npx create-remix@latest目前我的项目源码位于： https://github.com/willin/bet...
配置
- eslint
- prettier
- editorconfig
可选项：
- lint-staged
- husky
装置依赖
- tailwindcss
- daisyui
- @tailwindcss/typography
- postcss
- pm2
创立 Authing 用户池及利用
创立登录、登记接口
登录接口
import { redirect } from '@remix-run/node';export const loader = async () => { return redirect( `${process.env.AUTHING_SSO_URL}/login?app_id=${process.env.AUTHING_APP_ID}` );};登记接口
import { redirect } from '@remix-run/node';export const loader = async () => { return redirect( `${process.env.AUTHING_SSO_URL}/logout?redirectUri=${encodeURIComponent( process.env.HOMEPAGE || 'https://willin.wang' )}` );};登录回调 callback
import { json, redirect } from '@remix-run/node';export type OidcResponse = { error?: string; error_description?: string; access_token: string; expires_in: number; id_token: string; scope: string; token_type: string;};export const loader = async ({ request }) => { const url = new URL(request.url); const code = url.searchParams.get('code'); if (code === null) { return redirect('/login'); } const body = { client_id: process.env.AUTHING_APP_ID, client_secret: process.env.AUTHING_APP_SECRET, grant_type: 'authorization_code', code }; const formBody = []; // eslint-disable-next-line for (const property in body) { const encodedKey = encodeURIComponent(property); // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line @typescript-eslint/no-unsafe-argument const encodedValue = encodeURIComponent(body[property]); formBody.push(`${encodedKey}=${encodedValue}`); } const res = await fetch(`${process.env.AUTHING_APP_DOMAIN}/oidc/token`, { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, body: formBody.join('&') }); const oidcToken = (await res.json()) as OidcResponse; if (oidcToken.error) { console.error(oidcToken); return redirect('/login'); } // 以上获取 oidc token 为外围局部 // 上面依据业务须要去操作其余 const resInfo = await fetch( `${process.env.AUTHING_APP_DOMAIN}/oidc/me?access_token=${oidcToken.access_token}` ); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment const user = await resInfo.json(); return json(user);};