VuePress 中如何增加用戶登錄功能
VuePress是什么?
先讓我們看看 VuePress能干什么?有什么效果?
很像vue官網(wǎng)的文檔頁(yè)面,因?yàn)関uePress就是尤大大的一個(gè)力作
vuePress官網(wǎng)介紹介紹的很詳細(xì),這里只做搭建VuePress項(xiàng)目教程
在 VuePress 中增加用戶登錄
VuePress 是 Vuejs 官方提供的一個(gè)快速建設(shè)文檔站點(diǎn)的工具,在簡(jiǎn)單配置好功能后,需要做的事情就剩下寫好一個(gè)個(gè) Markdown 文檔。
因?yàn)?VuePress 提供了可以在 Markdown 中使用 Vue 的能力,所以有時(shí)候,希望可以在它的文檔功能基礎(chǔ)上增加部分常規(guī)功能,比如用戶登錄;有團(tuán)隊(duì)希望公司建設(shè)的文檔內(nèi)容僅公司員工可查看,因?yàn)橛锌赡軙?huì)有涉及內(nèi)容保密的部分
VuePress 本身的安裝配置過(guò)程不再贅述,可參考官方文檔,本文將介紹使用 v-dialogs 對(duì) VuePress 增加用戶登錄功能的進(jìn)行改造,僅作為拋磚引玉,更多的需求,大家可以自由發(fā)揮想象。
安裝插件
安裝 v-dialogs 插件,將會(huì)使用它的模態(tài)窗口 (Modal) 和消息通知 (Alert) 的功能
# npm npm i v-dialogs -D # yarn yarn add -D v-dialogs
創(chuàng)建登錄表單
新增 Login.vue 文件用于登錄表單,它將使用模態(tài)窗口(Modal)進(jìn)行展示
<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) // 關(guān)閉窗口 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 對(duì) 應(yīng)用級(jí)別的配置 的配置文件,文件 export default 了一個(gè)鉤子函數(shù),并接受一個(gè)包含了一些應(yīng)用級(jí)別屬性的對(duì)象作為參數(shù)。你可以使用這個(gè)鉤子來(lái)安裝一些附加的 Vue 插件、注冊(cè)全局組件,或者增加額外的路由鉤子等
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 對(duì)全局進(jìn)行了混入操作,所以在每個(gè)文檔頁(yè)面被訪問后都會(huì)觸發(fā)該 mounted() 生命周期進(jìn)行用戶權(quán)限的校驗(yàn)。在這里需要特別說(shuō)明的是,原來(lái)對(duì)于權(quán)限檢查的操作,本是希望在 Vue Router 的路由守衛(wèi)中處理,但由于 瀏覽器的 API 訪問限制 原因,Vue 插件在注冊(cè)的過(guò)程中因?yàn)樾枰褂玫?a target="_blank" >瀏覽器的API (window 或 document),但在編譯為靜態(tài)文件的過(guò)程中,需要通過(guò) Node.js 服務(wù)端渲染,因此所有的 Vue 相關(guān)代碼都應(yīng)當(dāng)遵循 編寫通用代碼 的要求。簡(jiǎn)而言之,請(qǐng)確保只在 beforeMount 或者 mounted 訪問瀏覽器 / DOM 的 API
v-dialogs 在注冊(cè)的過(guò)程中需要使用到 document 這個(gè)對(duì)象,所以在編譯的過(guò)程中會(huì)出現(xiàn) document is not defined 的錯(cuò)誤信息,基于上述的原因,對(duì)于功能權(quán)限的檢查在 mounted 生命周期中執(zhí)行,并將該操作進(jìn)行全局混入,才能達(dá)到全局校驗(yàn)的效果
上述的代碼編寫部署并重新構(gòu)建后,就會(huì)在每個(gè)文檔頁(yè)面中執(zhí)行用戶身份校驗(yàn)
- 未登錄,則彈出模態(tài)窗口要求輸入身份信息進(jìn)行校驗(yàn)
- 已登錄時(shí)就顯示正確的文檔內(nèi)容
實(shí)例
可以訪問下面的站點(diǎn)進(jìn)行在線預(yù)覽登錄功能的改造
輸入任意用戶名和密碼進(jìn)行體驗(yàn)即可
源代碼
請(qǐng)?jiān)L問: https://github.com/TerryZ/vuepress-login
總結(jié)
以上所述是小編給大家介紹的VuePress 中如何增加用戶登錄功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- Vue實(shí)現(xiàn)用戶沒有登陸時(shí),訪問后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面的實(shí)現(xiàn)思路
- Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁(yè)面后狀態(tài)依然保持)
- vue實(shí)現(xiàn)用戶長(zhǎng)時(shí)間不操作自動(dòng)退出登錄功能的實(shí)現(xiàn)代碼
- vue 實(shí)現(xiàn)用戶登錄方式的切換功能
- VUE:vuex 用戶登錄信息的數(shù)據(jù)寫入與獲取方式
- vue同一個(gè)瀏覽器登錄不同賬號(hào)數(shù)據(jù)覆蓋問題解決方案
- vue?+elementui?項(xiàng)目登錄通過(guò)不同賬號(hào)切換側(cè)邊欄菜單的顏色
- Vue實(shí)現(xiàn)登錄記住賬號(hào)密碼功能的思路與過(guò)程
- vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能
- vue同一瀏覽器登錄多賬號(hào)處理方案
相關(guān)文章
詳解用vue2.x版本+adminLTE開源框架搭建后臺(tái)應(yīng)用模版
這篇文章主要介紹了用vue2.x版本+adminLTE開源框架 搭建后臺(tái)應(yīng)用模版,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-07-07Vue實(shí)現(xiàn)路由跳轉(zhuǎn)和嵌套
本篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)和嵌套,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06vue中接口域名配置為全局變量的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue中接口域名配置為全局變量的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果
這篇文章主要介紹了vue通過(guò)v-show實(shí)現(xiàn)回到頂部top效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12