next password protect下载 - next password protect源代码下载

next password protect

Ai源码

v1.8.0

下载

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

示例with-custom-logo.mov

它如何工作

该库将密码提示添加到您的下一个库。它由两个主要部分组成：

两个无服务器API路由：
- 登录路由，该路由检查密码是否正确，并在JWT设置cookie，以防其为cookie。
- 如果您具有有效的JWT的授权cookie，则验证检查路由。
将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`