feat(middleware): server app 中间件鉴权

next.config.mjs

@@ -8,17 +8,21 @@ const nextConfig = {
         source: '/queyueapi/:path*',
         destination: `${process.env.NEXT_PUBLIC_HOST}/:path*`,
       },
-    ];
-  },
-  redirects: async () => {
-    return [
       {
         source: '/',
         destination: '/vol/list/all',
-        permanent: true,
       },
     ];
   },
+  // redirects: async () => {
+  //   return [
+  //     {
+  //       source: '/',
+  //       destination: '/vol/list/all',
+  //       permanent: true,
+  //     },
+  //   ];
+  // },
   // eslint: {
   //   ignoreDuringBuilds: true,
   //   ignoreBuildErrors: true,

src/app/page.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import Image from 'next/image';
-
-import DownloadCard from '@/app/download/components/DownloadCard';
-
-const qrCodeList: Array<DownloadQrcodeCard> = [
-  {
-    platform: 'APP Store',
-    iconUrl: '/img/download/logo_apple.svg',
-    qrCode: '',
-  },
-  {
-    platform: 'Android',
-    iconUrl: '/img/download/logo_android.svg',
-    qrCode: '/img/download/qrcode_android.svg',
-  },
-];
-
-export default function Download() {
-  return (
-    <main className="w-full flex flex-col items-center pb-[104px] font-normal">
-      {/* 首屏 */}
-      <div className="relative w-full h-min-[1000px] h-screen flex flex-col items-center pt-[30vh] bg-[url(/img/download/background_1.jpg)] bg-center bg-cover bg-no-repeat text-[#fff]">
-        {/* slogan */}
-        <div className="flex flex-col items-center mb-[40px]">
-          <Image width={410} height={50} src="/img/download/slogan_line1.svg" alt="为独立音乐，雀跃" />
-          <Image
-            className="w-[6px] h-[20px] mt-[30px] mb-[30px] overflow-hidden"
-            width={6}
-            height={20}
-            src="/img/download/slogan_line2.svg"
-            alt="/"
-          />{' '}
-          <Image width={143} height={24} src="/img/download/slogan_line3.svg" alt="独立 不独于世" />
-        </div>
-
-        {/* APP二维码 */}
-        <div className="flex flex-row">
-          {qrCodeList.map(({ platform, iconUrl, qrCode }) => (
-            <DownloadCard key={platform} platform={platform} iconUrl={iconUrl} qrCode={qrCode} />
-          ))}
-        </div>
-      </div>
-
-      {/* 第二屏 */}
-      <div className="relative w-full h-[1000px] h-screen  pl-[45.7vw] flex flex-col bg-[url(/img/download/background_2.jpg)] bg-center bg-cover bg-no-repeat">
-        {/* 花体字-“我们回来了” */}
-        <Image
-          className="w-[226px] h-[46px] mt-[16.67vh] mb-[50px]"
-          width={306}
-          height={46}
-          src="/img/download/back.svg"
-          alt="back"
-        />
-
-        {/* 诗歌 */}
-        <p className="text-[#000] text-[15px] leading-[28px] text-left">
-          音乐是一种态度
-          <br />
-          不论是创作者还是聆听者
-          <br />
-          它流经心灵
-          <br />
-          纵然期待影响现实的力量是种奢望
-          <br />
-          如果刚巧有些声音
-          <br />
-          会让你记得一段往事
-          <br />
-          伤痛或是甜蜜
-          <br />
-          那记忆便有了厚厚的壳
-          <br />
-          恒久的 温暖有如初生
-        </p>
-      </div>
-    </main>
-  );
-}

src/components/Header/index.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
@@ -18,6 +20,7 @@ export default function Header({ className }: { className?: string }) {
     })),
   );
   const pathName = usePathname();
+  const [redirect, setRedirect] = useState<string>('');
   const menuList = [
     {
       name: '首页',
@@ -33,6 +36,16 @@ export default function Header({ className }: { className?: string }) {
     },
   ];
 
+  // 登录重定向
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const redirectParam = searchParams.get('redirect');
+    setRedirect(redirectParam || '');
+    if (!userInfo.id && redirectParam) {
+      setShowLogin(true);
+    }
+  }, [pathName]);
+
   return (
     <header className={`w-full h-[80px] z-2 ${className}`}>
       <div className="relative w-[1200px] h-full mx-auto flex items-center justify-between">
@@ -63,7 +76,7 @@ export default function Header({ className }: { className?: string }) {
         </div>
 
         {/* 登录框 */}
-        {showLogin && <LoginModal />}
+        {showLogin && <LoginModal redirect={redirect} />}
       </div>
     </header>
   );

src/components/Login/LoginForm.tsx

@@ -3,13 +3,15 @@
 import React, { useState, useMemo, useEffect } from 'react';
 
 import { debounce } from 'lodash';
+import { useRouter } from 'next/navigation';
 import { useShallow } from 'zustand/react/shallow';
 
 import { Button } from '@/components';
 import { apiSendSMS } from '@/services';
 import useUserStore from '@/store/user';
 
-export default function LoginForm() {
+export default function LoginForm({ redirect }: { redirect: string }) {
+  const router = useRouter();
   const { userLogin, setShowLogin } = useUserStore(
     useShallow((state) => ({
       userLogin: state.userLogin,
@@ -47,7 +49,8 @@ export default function LoginForm() {
     const result = await userLogin({ mobile: phone, mobileCheckCode: authCode, deviceId: '1' });
     if (result.code === 200) {
       setShowLogin(false);
-      window.location.reload();
+      console.log({ redirect });
+      redirect ? router.replace(redirect) : window.location.reload();
     } else {
       setErrorText(result.message);
       setBtnLoading(false);

src/components/Login/LoginModal.tsx

@@ -5,7 +5,7 @@ import LoginForm from './LoginForm';
 
 import useUserStore from '@/store/user';
 
-export default function LoginCard() {
+export default function LoginCard({ redirect }: { redirect: string }) {
   const { setShowLogin } = useUserStore(
     useShallow((state) => ({
       setShowLogin: state.setShowLogin,
@@ -38,7 +38,7 @@ export default function LoginCard() {
         />
 
         {/* form */}
-        <LoginForm />
+        <LoginForm redirect={redirect} />
 
         <div className="absolute bottom-[30px] left-0 right-0 text-[13px] leading-[18px] text-[rgba(0,0,0,0.4)] text-center">
           注册登录即代表同意{' '}

src/middleware.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from 'next/server';
+
+import type { NextRequest } from 'next/server';
+
+export async function middleware(request: NextRequest) {
+  const token = request.cookies.get('token' as any)?.value;
+  if (token) return NextResponse.next();
+  // 307: 临时重定向
+  return NextResponse.redirect(new URL(`/?redirect=${encodeURIComponent(request.nextUrl.pathname)}`, request.url), 307);
+}
+
+export const config = {
+  matcher: [
+    // '/((?!api|_next/static|_next/image|favicon.ico).*)',
+    '/my/:path*',
+    '/vol/list/:path*',
+  ],
+};