Build Personal Knowledge Payment Application System-(2) User Session Management

Video address: https://www.bilibili.com/video/BV1qG4y1a7Ti/

User Management

 graph TB

Start1([Start])-->
logout1[注销] --> check1{判断 url 参数} --F--> destroySession[清除 Session 然后 SSO 注销] -->logout1
check1 --T--> logout2[跳转 SSO 注销链接]
logout2-->Stop1([Stop])

Start2([Start]) --登录回调--> callback[记录 Session] --> redierct[跳回页面] --> loader[Loader 读取用户信息] --> check2{是否失效} --F--> getUserInfo[获取用户信息] --> Stop2([Stop])
check2 --T--> refreshToken[通过 refreshToken 更新 accessToken] --> getUserInfo

Session management

SessionStorage

 import { createCookieSessionStorage } from '@remix-run/node';

export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: '_session',
    sameSite: 'lax',
    path: '/',
    httpOnly: true,
    secrets: [process.env.COOKIE_SECRET || 's3cr3t'],
    secure: process.env.NODE_ENV === 'production'
  }
});

export const { getSession, commitSession, destroySession } = sessionStorage;

Token management

Encapsulate the two methods of changing code to AccessToken and RefreshToken to AccessToken

 async function tokenRequest(body) {
  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;
  return oidcToken;
}

export function code2Token(code: string) {
  const body = {
    client_id: process.env.AUTHING_APP_ID,
    client_secret: process.env.AUTHING_APP_SECRET,
    grant_type: 'authorization_code',
    code
  };

  return tokenRequest(body);
}

export function refreshToken(token: OidcResponse) {
  const body = {
    client_id: process.env.AUTHING_APP_ID,
    client_secret: process.env.AUTHING_APP_SECRET,
    grant_type: 'refresh_token',
    refresh_token: token.refresh_token
  };

  return tokenRequest(body);
}

i18n

Plugin: https://remix-i18n.js.cool

Install

 npm install --save remix-i18n

configure

 export interface RemixI18nOptions {
  // 支持的语言
  supportedLanguages: string[];
  // 失败备选
  fallbackLng: string;
}

 const i18n = new RemixI18n({
  supportedLanguages: ['en', 'tl', 'da', 'zh'],
  fallbackLng: 'zh'
});

Add language translation

 i18n.set('locale', {
  hello: '你好'
});

Client Settings

 // entry.client.tsx
import { hydrate } from 'react-dom';
import { RemixBrowser } from 'remix';
import { I18nProvider } from 'remix-i18n';
import { i18n, getLocale } from '~/i18n';

const locale = getLocale(window.location.pathname);
i18n.locale(locale);

hydrate(
  <I18nProvider i18n={i18n}>
    <RemixBrowser />
  </I18nProvider>,
  document
);

Server side settings

 // entry.server.tsx
import { renderToString } from 'react-dom/server';
import { RemixServer } from 'remix';
import type { EntryContext } from 'remix';
import { I18nProvider } from 'remix-i18n';
import { i18n, getLocale } from '~/i18n';

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  const locale = getLocale(new URL(request.url).pathname);
  i18n.locale(locale);

  const markup = renderToString(
    <I18nProvider i18n={i18n}>
      <RemixServer context={remixContext} url={request.url} />
    </I18nProvider>
  );

  responseHeaders.set('Content-Type', 'text/html');

  return new Response(`<!DOCTYPE html>${markup}`, {
    status: responseStatusCode,
    headers: responseHeaders
  });
}

language switch

 const i18n = useI18n();
const location = useLocation();
useEffect(() => {
  const locale = getLocale(location.pathname);
  if (locale !== i18n.locale()) {
    i18n.locale(locale);
  }
}, [location]);

Use templates

 const { t } = useI18n();

// jsx
<h1>{t('hello')}</h1>;

PS

Remaining problems: acquisition of user extended information (take time to explore and continue)

Next topic: DaisyUI theme switching implementation

Build Personal Knowledge Payment Application System-(2) User Session Management

User Management

Session management

Token management

i18n

Install

configure

Add language translation

Client Settings

Server side settings

language switch

Use templates

PS

willin

引用和评论

一个开源的联邦宇宙（Mastodon、Fediverse）别名服务

喜大普奔，适用于 VS Code 的 GitHub Copilot 全新免费版本正式推出，GitHub 全球开发者突破1.5亿

Vue.js-Vue实例

🤩必看！Cherry Studio + DeepSeek 搭建本地私有知识库！

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

如何在仓库中添加只对自己生效的.gitignore规则？

不要再这样编写 async/await