试着给VuePress添加登录授权支持,基于v-dialogs
背景介绍
VuePress是个不错的能基于Markdown快速构建静态网站的框架,初步来说,对外访问都是透明的。
但是可能因为一些保密需要,有些站点的文档,我们希望控制一下访问,所以我们借着别人的轮子记录下怎么给VuePress实现简单版本的全局登录验证弹窗。
给项目添加弹窗插件
npm i v-dialogs -D
新建Login.vue
和Helper.js
Login.vue
这是构建一个登录框,基于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
,如果没有可以新建一个。
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
是对全局混入插入,因为v-dialogs
插件在注册的过程中需要使用到document
这个对象,所以这里一定要在beforeMount或者mounted时间来做。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步