動的APIによるログアウト

1813 ワード
テキストリンク
next.jsの動的API機能について知りました!
完璧なログイン実装ではないが,Cookieを簡単に利用してログインとログアウトを実現した.
まず、apiフォルダのログインとログアウト、ログインの有無を判断するための3つのapiファイルを以下の画像に作成しました.

次のコードは、POST要求をログインAPIに送信する.
有効期限3600秒(1時間)、名前a name、key=MikeのCookieをヘッダーに保存
export default (req, res) => {
  if (req.method === "POST") {
    res.setHeader("Set-Cookie", "a_name=Mike;Max-Age=3600;HttpOnly,Secure");
    // setHeader의 헤더에 이름 a_name, 값은 Mike, 3600초 만료일을 가진 쿠키 생성
    res.statusCode = 200;
    res.json({ message: "ok" });
  }
};
そしてログインボタンに入れる関数を次のようにすればいいのです.
  const login = () => {
    Axios.post("/api/login").then((res) => {
      if (res.status === 200) {
        // 로그인성공
        router.push("admin");
      } else {
        // 로그인 실패
        window.alert("로그인 실패");
      }
    });
  };
そしてisLoginjsログインのユーザー情報を保存
export default (req, res) => {
  res.statusCode == 200;
  res.json({ name: req.cookies.a_name });
};코드를 입력하세요
isLoginの状態でログインするかどうかを判断
    axios.get("/api/isLogin").then((res) => {
      if (res.status === 200 && res.data.name) {
        //로그인처리
        setIsLogin(true);
      } else {
        // 로그인 안됨
        router.push("/login");
      }
    });
  };
ログアウトは、Cookieの有効期限を簡単に0に変更することもできます.
抹消手続きをした
export default (req, res) => {

  res.setHeader("Set-Cookie", "a_name=HMK;Max-Age=0;HttpOnly,Secure");
  // setHeader의 쿠키 토큰 시간은 0으로 지정해서 로그아웃!
  res.statusCode = 200;
  res.json({ message: "ok" });
};
クラスとオブジェクト
フラスコのテンプレートと静的ファイル