用 session['currentUser'] 记录登录用户

- cookie设置要 禁用secure，因为本地开发是 http 不是https
- withSession 处理session操作
- 给 NextApiRequest 添加自定义的属性

lib/withSession.tsx

@@ -0,0 +1,12 @@
+import {withIronSession} from 'next-iron-session';
+import {NextApiHandler} from 'next';
+
+export function withSession(handler: NextApiHandler) {
+    return withIronSession(handler, {
+        // password: process.env.SECRET_COOKIE_PASSWORD,
+        password: 'c2a85490-cc60-4f21-94e8-8dc5dd3220da', //密钥，这个应该用环境变量
+        cookieName: 'blog',
+        // 这个选项如果不设置 你本地开发是http的 就会种不下 cookie 获取 user 会是 undefined
+        cookieOptions: {secure: false}
+    });
+}

next-env.d.ts

@@ -1,7 +1,17 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+import * as next from 'next';
 
 declare module "*.png" {
   const value: string;
   export default value;
 }
+
+
+declare module 'next' {
+    import {Session} from 'next-iron-session';
+
+    interface NextApiRequest {
+        session: Session
+    }
+}

package.json

@@ -20,6 +20,7 @@
     "gray-matter": "4.0.2",
     "lodash": "^4.17.15",
     "next": "10.0.6",
+    "next-iron-session": "^4.1.7",
     "pg": "^8.2.1",
     "md5": "^2.2.1",
     "react": "17.0.1",

pages/api/v1/sessions.tsx

@@ -1,5 +1,6 @@
 import {NextApiHandler} from 'next';
 import {SignIn} from '../../../src/model/SignIn';
+import {withSession} from "../../../lib/withSession";
 
 const Sessions: NextApiHandler = async (req, res) => {
     const {username, password} = req.body;
@@ -12,9 +13,11 @@ const Sessions: NextApiHandler = async (req, res) => {
         res.statusCode = 422;
         res.end(JSON.stringify(signIn.errors));
     } else {
+        req.session.set('currentUser', signIn.user);
+        await req.session.save()
         res.statusCode = 200;
         res.end(JSON.stringify(signIn.user));
     }
 };
 
-export default Sessions;
+export default withSession(Sessions);

pages/sign_in.tsx

@@ -1,8 +1,10 @@
-import {NextPage} from 'next';
+import {GetServerSideProps, NextPage} from 'next';
 import {useCallback, useState} from 'react';
 import axios, {AxiosError, AxiosResponse} from 'axios';
+import {withSession} from '../lib/withSession';
+import {User} from '../src/entity/User';
 
-const SignUp: NextPage = () => {
+const SignIn: NextPage<{ user: User }> = (props) => {
     const [formData, setFormData] = useState({
         username: '',
         password: '',
@@ -27,6 +29,11 @@ const SignUp: NextPage = () => {
     }, [formData]);
     return (
         <>
+            {props.user &&
+            <div>
+                当前登录用户为 {props.user.username}
+            </div>
+            }
             <h1>登录</h1>
             <form onSubmit={onSubmit}>
                 <div>
@@ -61,4 +68,15 @@ const SignUp: NextPage = () => {
     );
 };
 
-export default SignUp;
+export default SignIn;
+
+// @ts-ignore
+export const getServerSideProps: GetServerSideProps = withSession(async (context) => {
+    // @ts-ignore
+    const user = context.req.session.get('currentUser');
+    return {
+        props: {
+            user: JSON.parse(JSON.stringify(user))
+        }
+    };
+});