https://github.com/terryz/vuepress-login
Add user authorization for VuePress
https://github.com/terryz/vuepress-login
login vue vuejs vuepress
Last synced: over 1 year ago
JSON representation
Add user authorization for VuePress
- Host: GitHub
- URL: https://github.com/terryz/vuepress-login
- Owner: TerryZ
- License: mit
- Created: 2019-11-27T01:59:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T15:01:23.000Z (over 3 years ago)
- Last Synced: 2025-03-22T10:13:42.952Z (over 1 year ago)
- Topics: login, vue, vuejs, vuepress
- Language: JavaScript
- Homepage: https://terryz.github.io/vuepress-login
- Size: 619 KB
- Stars: 44
- Watchers: 2
- Forks: 17
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-login
Add user authorization for VuePress
Clear login status
## Examples
Live examples in below sites
- [github.io](https://terryz.github.io/vuepress-login)
- [gitee.io](https://terryz.gitee.io/vuepress-login)
Enter any username and password for experience
## Source code
Please visit [https://github.com/TerryZ/vuepress-login](https://github.com/TerryZ/vuepress-login)
## Install plugin
Install `v-dialogs` plugin for Modal dialog
```
# npm
npm i v-dialogs -D
# yarn
yarn add -D v-dialogs
```
## Create login form file
Add `Login.vue` file for login form, display in Modal dialog
```vue
User Name
Password
OK
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()
})
window.localStorage.setItem(STORAGE_KEY, data)
this.$emit('close', true)
} else {
this.$dlg.alert('Please complete the content', {
messageType: 'warning'
})
}
}
}
}
.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
```
## VuePress Configuration
Add `enhanceApp.js` file in `/.vuepress`
```js
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()
})
})
}
}
})
}
```
Will do user authorization verify in every document
- If not authorized, show login Modal dialog
- If authorized, going to visit vuepress documentation
export default {
methods: {
clear () {
window.localStorage.clear()
alert('User login status has been cleared!');
}
}
}