next password protect

密碼保護您的Next.js部署。查看演示（密碼是秘密）

---

示例with-custom-logo.mov

它如何工作

該庫將密碼提示添加到您的下一個庫。它由兩個主要部分組成：

1. 兩個無服務器API路由：
   • 登錄路由，該路由檢查密碼是否正確，並在JWT設置cookie，以防其為cookie。
   • 如果您具有有效的JWT的授權cookie，則驗證檢查路由。
2. 將Next.js應用程序包裝的HOC（高階組件），並添加了一張檢查，該檢查驗證了是否已登錄。如果您這樣做，則可以正常查看該應用程序；否則，向您提供了密碼提示。

重要的是：此庫的推薦用例處於登台或預覽環境中。通過利用WebPack的DefinePlugin ，我們可以確保僅在某些環境中包含該庫，從而使生產捆綁包大小較小。

該庫並不意味著作為安全的密碼身份驗證包裝器，而是將管轄人拒之門外的一種方式。

安裝

yarn add next-password-protect
# or
npm install next-password-protect

用法

有3個步驟可以啟用密碼保護：設置全局變量，添加API路由並將HOC添加到_APP中。

步驟1

為了能夠利用刪除死亡代碼，建議添加諸如process.env.PASSWORD_PROTECT之類的環境變量，並基於該變量啟用庫。要設置此變量，請將以下內容添加到next.config.js ：

 module . exports = {
  env : {
    // Add any logic you want here, returning `true` to enable password protect.
    PASSWORD_PROTECT : process . env . ENVIRONMENT === 'staging' ,
  }
} ) ;

步驟2

添加兩個API路由，一條帶有loginHandler ，另一個帶有passwordCheckHandler API功能。只要將名稱分別loginApiUrl給checkApiUrl ，您就可以將其命名。默認情況下，它期望/login和/passwordCheck 。

 import { loginHandler } from "next-password-protect" ;

export default loginHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ; 

 import { passwordCheckHandler } from "next-password-protect" ;

export default passwordCheckHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ;

步驟3

將withPasswordProtect hoc添加到pages/_app.tsx中的App的默認導出：

 import { withPasswordProtect } from "next-password-protect" ;

// Before: export default App;
export default process . env . PASSWORD_PROTECT
  ? withPasswordProtect ( App , {
    // Options go here (optional)
    loginApiUrl : "/login" ,
  } )
  : App ;

注意：確保指定loginApiUrl和/或checkApiUrl如果API路由不默認。

API

API路線處理程序

loginHandler(password: string, options)

選項對象可以包含以下任何選項：

選項	描述	預設值
cookieMaxAge	cookie max-age屬性	undefined
cookieName	授權餅乾的名稱	'next-password-protect'
cookieSameSite	Samesite cookie屬性	false
cookieSecure	在cookie上固定標誌	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

選項對象可以包含以下任何選項：

選項	描述	預設值
cookieName	授權餅乾的名稱	'next-password-protect'

下一個應用程序事件

withPasswordProtect(App: NextApp, options)

選項對象可以包含以下任何選項：

選項	描述	預設值
checkApiUrl	由passwordCheckHandler處理的API路由的相對路徑	'/api/passwordCheck'
loginApiUrl	loginHandler處理的API路線的相對路徑	'/api/login'
loginComponent	提供您自己的反應組件以顯示為登錄提示	LoginComponent
loginComponentProps	屬性對象可以自定義登錄提示，而無需覆蓋整個組件（請參見下文）	{}
bypassProtection	針對特定路線的旁路保護，由NextRouter參數通過回調決定	({ route }) => false

loginComponentProps對象可以包含以下任何選項：

選項	描述	預設值
backUrl	顯示與此URL的鏈接以返回主要網站	undefined
buttonBackgroundColor	登錄按鈕背景顏色	'#01EDBC'
buttonColor	登錄按鈕顏色	'#111'
logo	在提示（IMG SRC）上方顯示徽標	undefined

先進的

自定義登錄組件

為了更改默認的登錄組件，可以將React組件提供給withPasswordProtect HOC。為了使庫正常運行，請確保您的登錄組件具有由API路由驗證的密碼輸入。您可以將src/hoc/LoginComponent.tsx用作起點。

警告

尚未支持AMP，因為登錄COMPONENT失敗了AMP驗證。在放大器頁面上，什麼都沒有渲染。這可以通過將登錄程序更改為有效放大器來解決。