alphawq / vuepress-plugin-posts-encrypt Goto Github PK

View Code? Open in Web Editor NEW

33.0 3.0 4.0 10.85 MB

A vuepress plugin to add access verification to your blog

Home Page: https://alphawq.github.io/_blog/resume/

License: MIT License

JavaScript 19.40% HTML 5.74% Less 22.67% TypeScript 50.30% Shell 0.30% Vue 0.85% Stylus 0.74%

vuepress-plugin vuepress vue

vuepress-plugin-posts-encrypt's Introduction

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

vuepress-plugin-posts-encrypt's People

Stargazers

Watchers

Forkers

swwtech 201206030 tonyleecn zuqiuxie

vuepress-plugin-posts-encrypt's Issues

使用自定义模板template路径问题

问题1

// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'posts-encrypt',
      {
        // Here!!!
       // 这样就可以
        template: __dirname + '\\posts-encrypt\\template.html',

        // 这样写找不到路径
        // template: '/docs/.vuepress/posts-encrypt/template.html',
        // template: './posts-encrypt/template.html',
        injectConfig: {
          less: '',
          iview: true,
          animate: true
        }
         ...
      }
    ]
}

问题2

使用自定义模板时，vue无法正常使用（即使模板内容和默认模板内容一致）。

problem with "route: '/auth.html" ?

Hi, sorry to bother again, but I still have problem.

I changed "route: '/auth" to "route: '/auth.html" in config.js but it doesn't fix the problem, is that when I click a link to encrypted post, it should be redirected to this address " .../auth.html?redirect=v..." to go to login page, however the output of this file in docs folder now looks like this:

So obviously following the link " .../auth.html?redirect=v..." will cause 404 error once again, because the name of auth file is wrong, it's now auth.html.html so it can't find the correct auth.html.

Manually fixing the link by add .html in address bar of browser will make it work, but it's very inconvenient.

If I set value back to "route: '/auth" then address becomes " .../auth?redirect=v..." once again.

404问题

您好，我使用了你的插件。很不错，但是出现了一些问题
比如我的域名是http://www.zhangzhiyu.live:8900/vuepress
我的config配置

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

  // other options...
  plugins: [
  [
      'posts-encrypt',
      {
        route: '/auth',
        passwd: '123456',
        encryptInDev: true
      }
    ],
}

在页面配置

secret: true

访问404
URL地址为
www.zhangzhiyu.live:8900/vuepress/guide/uepressauth?redirect=v-30ba6292&path=%2Fguide%2Fvuepress%2F%E9%9B%86%E6%88%90%E5%85%A8%E6%96%87%E6%90%9C%E7%B4%A2%E6%8F%92%E4%BB%B6.html

大佬可否有个Demo示范一下

研究了一天，按照文档描述添加了很多遍，不知道为什么不生效
大佬可否写个Demo示范一下，实在不知道该怎么添加了。

404 when trying to access encrypted page.

Hello there, could you help me with this issue

I copied the configuration code to my config.js

plugins: [
    [
      'posts-encrypt',
      {
        route: '/auth',
        passwd: '123456',
        encryptInDev: true,
        expires: 1000  * 60
      }
    ]

and in article Frontmatter:

---
secret: true
passwd: AAsgh3737fhhh1ffaku#4567@AFFVVS
---

# My Private Dairy
- title: A Private Post
- date: 2021-10-28
- .......

But VuePress throws me an 404 when trying to access my post.
redirecteg URL in the browser: https://(mydomain)/auth?redirect=v-7ae5eb94&path=%2F(my_dir)%2F(secret_page).html
I can see it's opened for a split second and went to 404 error.

Any idea to fix this? Thanks.

插件打包部署在nginx上报404

vuepress用了这个插件后，打包部署后，直接404，是怎么回事

路径：http://127.0.0.1/auth?redirect=v-554c891c&path=%2F

密码明文容易泄漏，希望可以加个全局文章加锁控制

密码明文容易泄漏

现在密码是明文的，容易出现编写文章时密码泄漏，可以将密码改为base64加密的形式吗

希望可以加个全局文章加锁控制

希望可以加个全局文章加锁控制，进入网站时就需要登录，否则跳转登录页。现在只能每个文章都加一个加密的字段

Support vuepress 2.0

Feature request

What problem does this feature solve?