- 当你在丰富自己的博客的时候，你想来点更加高端一点的操作，想做一个类似博客园一样的平台，那就得要登录和评论功能，看看大家对自己的博客有什么更好的看法和意见。下面就给大家介绍一下怎么给自己的博客添加登录和评论功能。
登录
VuePress 是 Vuejs 官方提供的一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档。
因为 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有时候，希望可以在它的文档功能基础上增加部分常规功能，比如用户登录；有团队希望公司建设的文档内容仅公司员工可查看，因为有可能会有涉及内容保密的部分
VuePress 本身的安装配置过程不再赘述，可参考官方文档，本文将介绍使用 v-dialogs 对 VuePress 增加用户登录功能的进行改造，仅作为抛砖引玉，更多的需求，大家可以自由发挥想象。
安装插件
安装 v-dialogs 插件，将会使用它的模态窗口 （Modal） 和消息通知 （Alert） 的功能
# npm
npm i v-dialogs -D
# yarn
yarn add -D v-dialogs
创建登录表单
新增 Login.vue 文件用于登录表单，它将使用模态窗口（Modal）进行展示
这是构建一个登录框，基于v-dialogs插件的。
里面有一个简单的表单判断，代码里面预埋了一些username和password，有符合的就放过了，你也可以换成你接口的逻辑。
# .vuepress\login\Login.vue
<template>
<div class="login-form">
<div class="form-header">账号</div>
<div>
<input type="text" class="form-control" v-model="username">
</div>
<div class="form-header">密码</div>
<div>
<input type="password" class="form-control" v-model="password">
</div>
<div class="btn-row">
<button class="btn" @click="login">
登录
</button>
</div>
</div>
</template>
<script>
import { STORAGE_KEY } from './helper'
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
login ()
{
if (this.username && this.password)
{
var userAndWords = { 'user1': 'password1', 'user2' : 'password2'}
var isMatchUser = false
for(var key in userAndWords)
{
var tempUser = key;
var tempPassword = userAndWords[key]
if(this.username === tempUser && this.password === tempPassword)
{
isMatchUser = true
break;
}
}
if(isMatchUser)
{
const data = JSON.stringify({
name: this.username,
time: new Date().getTime()
})
window.localStorage.setItem(STORAGE_KEY, data)
this.$emit('close', true)
}
else{
this.$dlg.alert('抱歉，账号密码不对', {
messageType: 'warning'
})
}
}
else {
this.$dlg.alert('请输入账号密码', {
messageType: 'warning'
})
}
}
}
}
</script>
<style lang="stylus">
.login-form
padding: 1rem
display flex
flex-direction column
box-sizing border-box
.btn-row
margin-top 1rem
.btn
padding 0.6rem 2rem
outline none
background-color #60C084
color white
border 0
.form-header
color #666
margin-bottom 0.5rem
.form-control
padding 0.6rem
border 2px solid #ddd
width 100%
margin-bottom 0.5rem
box-sizing border-box
outline none
transition border 0.2s ease
&:focus
border 2px solid #aaa
</style>
账号和密码验证通过之后，我们往STORAGE_KEY写入了一个数据，以便后续刷新页面检查之前登录结果，详细判断见下文。
helper.js
这是一个用来判断是否登录验证通过的函数，如果返回true就算是验证通过，返回false那就没验证通过了。
# .vuepress\login\helper.js
export const STORAGE_KEY = 'user_auth_xxxxxxxxxxxx'
// Do user authorization verify
export function checkAuth ()
{
var auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
return auth && Object.keys(auth).length
}
这个是判断是否登录过的函数，说直白点，就是上面的登录成功后，会往这个key里面写一个对象值，每次调用页面之前，先走这个函数做一个检查，如果拿出来的auth是你觉得合法的，你就true通过，不然就一直继续弹登录框了。
其实这里，我们也可以根据自己的需要，给拿到的auth对象进一步做判断，当然要怎么搞就看你自己了。比如我会加一个过期时间，一个小时过期：
export function checkAuth ()
{
var auth = JSON.parse(localStorage.getItem(STORAGE_KEY))
console.log(auth)
if(auth && auth.time){
var preTime = new Date(auth.time)
var nowTime = new Date().setHours(-1)
if(nowTime > preTime)
{
return false;
}
return auth && Object.keys(auth).length
}
else
{
return false;
}
}
VuePress 配置
在 /.vuepress 位置新增 enhanceApp.js 文件，该文件是 VuePress 对 应用级别的配置 的配置文件，文件 export default 了一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等
import { checkAuth } from './login/helper'
import Login from './login/Login'
export default ({
Vue,
options,
router,
siteData
}) => {
Vue.mixin({
// 请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API
mounted() {
const doCheck = () => {
if (!checkAuth()) {
this.$dlg.modal(Login, {
width: 400,
height: 350,
title: '请登录您的账号',
singletonKey: 'user-login',
maxButton: false,
closeButton: false,
callback: data => {
if (data === true) {
// do some stuff after login
}
}
})
}
}
if (this.$dlg) {
doCheck()
} else {
import('v-dialogs').then(resp => {
Vue.use(resp.default)
this.$nextTick(() => {
doCheck()
})
})
}
}
})
}
代码中使用了 Vue.mixin 对全局进行了混入操作，所以在每个文档页面被访问后都会触发该 mounted() 生命周期进行用户权限的校验。在这里需要特别说明的是，原来对于权限检查的操作，本是希望在 Vue Router 的路由守卫中处理，但由于 浏览器的 API 访问限制 原因，Vue 插件在注册的过程中因为需要使用到浏览器的API （window 或 document），但在编译为静态文件的过程中，需要通过 Node.js 服务端渲染，因此所有的 Vue 相关代码都应当遵循 编写通用代码 的要求。简而言之，请确保只在 beforeMount 或者 mounted 访问浏览器 / DOM 的 API
v-dialogs 在注册的过程中需要使用到 document 这个对象，所以在编译的过程中会出现 document is not defined 的错误信息，基于上述的原因，对于功能权限的检查在 mounted 生命周期中执行，并将该操作进行全局混入，才能达到全局校验的效果
上述的代码编写部署并重新构建后，就会在每个文档页面中执行用户身份校验
- 未登录，则弹出模态窗口要求输入身份信息进行校验
- 已登录时就显示正确的文档内容
最终效果：
image.png
nice~~~
这样登录功能就好啦
评论
由于你的页面是“静态”的，你没有数据库和后端 API 的支持。但是你希望让你的页面拥有评论功能，让用户可以登录和发表评论。 代码托管平台（如 Github、Gitlab、Bitbucket、Coding 等平台，示例选择了github）提供了 OAuth API ， 在它们的帮助下，Vssue 可以让用户通过这些平台的帐号登录，将评论存储在这些平台的 Issue 系统中，并在当前页面展示。
评论插件：
npm install @vssue/vuepress-plugin-vssue
npm install @vssue/api-github-v3 或者 npm install @vssue/api-github-v4
使用插件
// .vuepress/config.js
module.exports = {
plugins: {
'@vssue/vuepress-plugin-vssue': {
// 设置平台，而不是 `api`
platform: 'github-v4',
// 其他的 Vssue 配置
owner: 'OWNER_OF_REPO', // 仓库的拥有者的名称
repo: 'NAME_OF_REPO', // 存储 Issue 和评论的仓库的名称
clientId: 'YOUR_CLIENT_ID', // 刚保存下来的 Client ID
clientSecret: 'YOUR_CLIENT_SECRET', // 刚才保存下来的 Client secrets
},
},
};
- @vssue/api-github-v3 和@vssue/api-github-v4的区别是v3不用登录，但是有调用次数限制，v4必须登录但没有次数限制 v3的platform是github，v4的是github-v4 用的是github的评论功能，所以必须有github账号
如何获取clientId和clientSecret
第一步：
登录github后点击 settings
第二步：点击 Developer settings
第三步：点击 New OAuth App
第四步：点击注册按钮
这里的Client ID和Client Secret就是我们想要的了。
使用
Vssue 已经注册为 Vue 组件，你可以在你的 VuePress Markdown 文件中直接使用它。
<!-- README.md -->
# Vssue Demo
<Vssue/>
自动创建评论
但是这样启用的话，我们需要为每个文章手动 click to create issue 创建评论，这显然不是我们需要的。
找到我们的 config.js 在插件@vssue/vuepress-plugin-vssue配置中，手动添加如下代码：
这样就不用我们每次去点击 click to create issue了。
自动为每个页面添加 Vssue
首先我们在之前下载的依赖中的 \node_modules\@vuepress路径下的theme-default文件夹复制到.vuepress目录下，并重命名为theme
接着我们重写 默认主题的样式，也就是 theme 文件夹下 layouts文件夹下的 Layout.vue组件。
找到该组件的 Page 组件部分，在插槽下方把我们的 <Vssue>组件给写进去，即可在每个页面都拥有评论。
这里的 :options="{ locale: 'zh' }" 意思是把地区改为中国。
由于该组件默认没有VuePress的居中效果，我们在页面中找了一个带有居中效果的类 copy 过来即可居中。
最终效果：
非常nice，你也试试哇~~~
