VuePress 中如何增加用户登录功能

vuepress是什么？

先让我们看看 vuepress能干什么？有什么效果？

很像vue官网的文档页面，因为vuepress就是尤大大的一个力作

vuepress官网介绍介绍的很详细，这里只做搭建vuepress项目教程

在 vuepress 中增加用户登录

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）进行展示

<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()
    })
    // 登录成功后的逻辑处理，这里将数据保存在 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 了一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 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 对全局进行了混入操作，所以在每个文档页面被访问后都会触发该 mounted() 生命周期进行用户权限的校验。在这里需要特别说明的是，原来对于权限检查的操作，本是希望在 vue router 的路由守卫中处理，但由于 浏览器的 api 访问限制 原因，vue 插件在注册的过程中因为需要使用到浏览器的api （window 或 document），但在编译为静态文件的过程中，需要通过 node.js 服务端渲染，因此所有的 vue 相关代码都应当遵循  的要求。简而言之，请确保只在 beforemount 或者 mounted 访问浏览器 / dom 的 api

v-dialogs 在注册的过程中需要使用到 document 这个对象，所以在编译的过程中会出现 document is not defined 的错误信息，基于上述的原因，对于功能权限的检查在 mounted 生命周期中执行，并将该操作进行全局混入，才能达到全局校验的效果

上述的代码编写部署并重新构建后，就会在每个文档页面中执行用户身份校验

• 未登录，则弹出模态窗口要求输入身份信息进行校验
• 已登录时就显示正确的文档内容

实例

可以访问下面的站点进行在线预览登录功能的改造

输入任意用户名和密码进行体验即可

源代码

请访问： https://github.com/terryz/vuepress-login

总结

以上所述是小编给大家介绍的vuepress 中如何增加用户登录功能，希望对大家有所帮助