溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
VuePress是什么？
先讓我們看看 VuePress能干什么？有什么效果？
很像vue官網(wǎng)的文檔頁面，因為vuePress就是尤大大的一個力作
vuePress官網(wǎng)介紹介紹的很詳細，這里只做搭建VuePress項目教程
在 VuePress 中增加用戶登錄
VuePress 是 Vuejs 官方提供的一個快速建設文檔站點的工具，在簡單配置好功能后，需要做的事情就剩下寫好一個個 Markdown 文檔。
因為 VuePress 提供了可以在 Markdown 中使用 Vue 的能力，所以有時候，希望可以在它的文檔功能基礎上增加部分常規(guī)功能，比如用戶登錄；有團隊希望公司建設的文檔內容僅公司員工可查看，因為有可能會有涉及內容保密的部分
VuePress 本身的安裝配置過程不再贅述，可參考官方文檔，本文將介紹使用 v-dialogs 對 VuePress 增加用戶登錄功能的進行改造，僅作為拋磚引玉，更多的需求，大家可以自由發(fā)揮想象。
安裝插件
安裝 v-dialogs 插件，將會使用它的模態(tài)窗口 （Modal） 和消息通知 （Alert） 的功能
# npm npm i v-dialogs -D # yarn yarn add -D v-dialogs
創(chuàng)建登錄表單
新增 Login.vue 文件用于登錄表單，它將使用模態(tài)窗口（Modal）進行展示
<template>
<div class="login-form">
<div class="form-header">User Name</div>
<div>
<input type="text" class="form-control" v-model="username">
</div>
<div class="form-header">Password</div>
<div>
<input type="password" class="form-control" v-model="password">
</div>
<div class="btn-row">
<button class="btn" @click="login">
OK
</button>
</div>
</div>
</template>
<script>
import { STORAGE_KEY } from './helper'
export default {
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
if (this.username && this.password) {
const data = JSON.stringify({
name: this.username,
time: new Date().getTime()
})
// 登錄成功后的邏輯處理，這里將數(shù)據(jù)保存在 localStorage 中僅作為功能演示
window.localStorage.setItem(STORAGE_KEY, data)
// 關閉窗口
this.$emit('close', true)
} else {
this.$dlg.alert('Please complete the content', {
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>
VuePress 配置
在 /.vuepress 位置新增 enhanceApp.js 文件，該文件是 VuePress 對 應用級別的配置 的配置文件，文件 export default 了一個鉤子函數(shù)，并接受一個包含了一些應用級別屬性的對象作為參數(shù)。你可以使用這個鉤子來安裝一些附加的 Vue 插件、注冊全局組件，或者增加額外的路由鉤子等
import { checkAuth } from './login/helper'
import Login from './login/Login'
export default ({
Vue,
options,
router,
siteData
}) => {
Vue.mixin({
mounted() {
const doCheck = () => {
if (!checkAuth()) {
this.$dlg.modal(Login, {
width: 300,
height: 350,
title: 'Employee login',
singletonKey: 'employee-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 對全局進行了混入操作，所以在每個文檔頁面被訪問后都會觸發(fā)該 mounted() 生命周期進行用戶權限的校驗。在這里需要特別說明的是，原來對于權限檢查的操作，本是希望在 Vue Router 的路由守衛(wèi)中處理，但由于 瀏覽器的 API 訪問限制 原因，Vue 插件在注冊的過程中因為需要使用到瀏覽器的API （window 或 document），但在編譯為靜態(tài)文件的過程中，需要通過 Node.js 服務端渲染，因此所有的 Vue 相關代碼都應當遵循 編寫通用代碼 的要求。簡而言之，請確保只在 beforeMount 或者 mounted 訪問瀏覽器 / DOM 的 API
v-dialogs 在注冊的過程中需要使用到 document 這個對象，所以在編譯的過程中會出現(xiàn) document is not defined 的錯誤信息，基于上述的原因，對于功能權限的檢查在 mounted 生命周期中執(zhí)行，并將該操作進行全局混入，才能達到全局校驗的效果
上述的代碼編寫部署并重新構建后，就會在每個文檔頁面中執(zhí)行用戶身份校驗
實例
可以訪問下面的站點進行在線預覽登錄功能的改造
github.io
gitee.io
輸入任意用戶名和密碼進行體驗即可
源代碼
請訪問： https://github.com/TerryZ/vuepress-login
總結
以上所述是小編給大家介紹的VuePress 中如何增加用戶登錄功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
