视频地址：https://www.bilibili.com/video...用户管理图TBStart1([Start])-->logout1[注销]-->check1{判断url参数}--F-->destroySession[清除Session然后SSO注销]-->logout1check1--T-->logout2[跳转到SSO注销链接]logout2-->Stop1([Stop])Start2([Start])--logincallback-->callback[记录Session]-->redierct[跳回页面]-->loader[Loader读取用户信息]-->check2{是否无效}--F-->getUserInfo[获取用户信息]-->Stop2([Stop])check2--T-->refreshToken[通过refreshToken更新accessToken]-->getUserInfo会话管理SessionStorageimport{createCookieSessionStorage}from'@remix-run/node';exportconstsessionStorage=createCookieSessionStorage({cookie:{name:'_session',sameSite:'lax',path:'/',httpOnly:true,secrets:[process.env.COOKIE_SECRET||'s3cr3t'],secure:process.env.NODE_ENV==='production'}});exportconst{getSession,commitSession,destroySession}=sessionStorage;Token管理封装了两个方法，将代码改成AccessToken和refreshingToken改成AccessToken同步函数tokenRequest(body){constformBody=[];//eslint-disable-next-linefor(constpropertyinbody){constencodedKey=encodeURIComponent(property);//eslint-disable-next-line@typescript-eslint/ban-ts-comment//@ts-ignore//eslint-disable-next-line@typescript-eslint/no-unsafe-argumentconstencodedValue=encodeURIComponent(body[财产]）;formBody.push(`${encodedKey}=${encodedValue}`);}constres=awaitfetch(`${process.env.AUTHING_APP_DOMAIN}/oidc/token`,{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},正文:formBody.join('&')});constoidcToken=(awaitres.json())asOidcResponse;returnoidcToken;}exportfunctioncode2Token(code:string){constbody={client_id:process.env.AUTHING_APP_ID,client_secret:process.env.AUTHING_APP_SECRET,grant_type:'authorization_code',代码};返回tokenRequest(body);}exportfunctionrefreshToken(token:OidcResponse){constbody={client_id:process.env.AUTHING_APP_ID,client_secret:process.env.AUTHING_APP_SECRET,grant_type:'refresh_token',refresh_token:token.refresh_token};return(Plugin:https://remix-i18n.js.coolinstallnpminstall--saveremix-i18nconfigureexportinterfaceRemixI18nOptions{//支持的语言supportedLanguages:string[];//失败fallbackLng:string;}consti18n=newRemixI18n({supportedLanguages:['en','tl','da','zh'],fallbackLng:'zh'});添加语言翻译i18n.set('locale',{hello:'Hello'});客户端设置//entry.client.tsximport{hydrate}from'react-dom';import{RemixBrowser}from'remix';import{I18nProvider}from'remix-i18n';import{i18n,getLocale}from'~/i18n';constlocale=getLocale(window.location.pathname);i18n.locale(locale);hydrate(,document);服务器端设置//入口.服务器.tsximport{renderToString}from'react-dom/server';import{RemixServer}from'remix';importtype{EntryContext}from'remix';import{I18nProvider}from'remix-i18n';import{i18n,getLocale}from'~/i18n';导出默认函数handleRequest(request:Request,responseStatusCode:number,responseHeaders:Headers,remixContext:EntryContext){constlocale=getLocale(newURL(request.url).pathname);i18n.locale（语言环境）；constmarkup=renderToString();responseHeaders.set('Content-Type','text/html');returnnewResponse(`${markup}`,{status:responseStatusCode,headers:responseHeaders});}语言切换consti18n=useI18n();constlocation=useLocation();useEffect(()=>{constlocale=getLocale(location.pathname);if(locale!==i18n.locale()){i18n.locale(locale);}},[loca化]);使用模板const{t}=useI18n();//jsx

{t('hello')}

;附言遗留问题：用户扩展信息的获取（需要时间了解后再继续）下一主题：DaisyUI主题切换实现