English | 简体中文

vuepress-plugin-posts-encrypt

A vuepress plugin to add access verification to your blog.

Install

yarn add vuepress-plugin-posts-encrypt

Usage

Step 1: Init configuration in vuepress config file

// .vuepress/config.js
module.exports = {

  // other options...
  plugins: [
    [
      'posts-encrypt',
      {
        route: '/auth',
        passwd: 123456,
        encryptInDev: true,
        expires: 1000 * 60,
        // version >= 0.1.0
        checkAll: true
      }
    ]
}

👇All configuration items can be seen at Configs part👇

Step 2: Configure the posts that need to be encrypted access in the blog

• If you want to do check for all routing. This feature is supported in version >=0.1.0

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'posts-encrypt',
      {
        // Here!!!
        checkAll: true, // version >= 0.1.0
        passwd: 123456
        // ...
      }
    ]
}

HINT: If set checkAll: true, the password set separately for each article will be invalidated at the same time.

• Set secret: true in the article Front Matter

---
title: A Private Post
date: 2021-09-03
categories:
  - Profile
tags:
  - resume
secret: true
---

• At the same time, you can also set a different password by passwd field for each article

---
title: A Private Post
date: 2021-09-03
categories:
  - Profile
tags:
  - resume
secret: true
passwd: 1233211234567
---

Thats it! 🚀🚀🚀

Step3: Run it & See the effect

BTW: Under dev mode encryptInDev: true also needs to be configured

Execute the following command to start the development service

vuepress dev docs

Click to enter a page that needs to verify the password, you can see the following effects:

Configs

Support custom templates

In the custom template scenario, the plugin needs to inject some logic into your template file, such as the logic related to password verification. So you need to provide a mark to inject this part of the code in the template.

The following marks except <%crypto_inject_tag%> & <%validate_js_tag%> are required, the others are optional. You are free to choose:

BTW: The following marks are inserted into the template from top to bottom, so you need to pay attention to the writing position of the mark

The position markers for content injection in the template include the following

<%iview_css_tag%> [Optional]

iView Component library's CSS injection location mark.

• Need to set iview: true in the injectConfig configuration

<%animate_css_tag%> [Optional]

Animate.css injection location mark.

• Need to set animate: true in the injectConfig configuration

<%iview_js_tag%> [Optional]

iView Component library's JS injection location mark.

• Need to set iview: true in the injectConfig configuration

<%minified_css_tag%> [Optional]

Injection location marker for compiled external 'less' files

• If you don't want to write css in the template, this configuration allows you to separate the style files that need to be used in the template into the less file. The plugin will help you compile and insert to the corresponding location. You only need Specify the absolute path of the style file in the less setting of injectConfig

<%crypto_inject_tag%> [Required]

• CryptoJS Script file insertion position

<%validate_js_tag%> [Required]

Password verification and Verified routing storage injection location mark of related logic

Support setting password expiration time

By default, if the verified route is on the same device and the same browser and the user does not clear the local cache, there is no need to verify again next time you come in, because it is stored in localstorage

If you don't want this, you can set expires for the password, the unit is milliseconds (ms). This expiration time is for each route, not all routes.

BTW: Do not set the expiration time too short, otherwise it may cause an endless loop of routing

The following are all supported configuration options：

interface InjectConfig {
  // The address of the less file for custom template outreach
  less?: string
  // Whether to inject the IView component library, the default is false
  iview?: boolean
  // Whether to inject anmitecss animation library, the default is false
  animate?: boolean
}

interface Options {
  // The route of the authentication page, the default is `/auth`
  route?: string
  // Basic password
  passwd: string
  // Custom password verification template file address
  template?: string
  // Whether the development environment is encrypted, the default is false
  encryptInDev?: boolean
  // Password expiration time, which is permanently valid by default, unit: ms
  expires?: number
  // Determine whether to inject other resources during template customization
  injectConfig?: InjectConfig
  // Enable all routing validation or not
  checkAll?: boolean // version >= 0.1.0
}

// The default options
const options: Options = {
  route: '/auth',
  passwd: 'hello world',
  template: '',
  encryptInDev: false,
  expires: 0,
  checkAll: false, // version >= 0.1.0
  injectConfig: {
    less: '',
    iview: false,
    animate: false
  }
}

👏👏 One key triple connection 👏👏

Changelog

CHANGELOG.md

License

MIT