Question

我开发了一个Vue应用程序，只有在用户使用正确的凭据登录后才能从CouchDB后端获取数据。当前状态要求用户在每次重新加载浏览器时输入登录信息，并且还在浏览器中显示登录信息。我正在寻找一种保存凭证的方法（可能是cookie，最好是以vue为中心的方式），因此它们可以用来要求需要它们的模块。

用户会看到以下HTML，从而获得凭据信息。

LandingPage.vue

<div id="wrapper">
    <el-dialog :visible="!authenticated">
        <div slot="title">LOG IN TO THE DOCUMENTATION REPOSITORY</div>
        <el-form inline>
            <el-form-item>
                <el-input type="text" v-model="username" placeholder="USERNAME"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input type="password" v-model="password" placeholder="PASSWORD"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :disabled="!(username.length&&password.length)" @click="authenticate">LOG IN</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <the-rest-of-the-app v-if="authenticated"></the-rest-of-the-app>
</div>

以下是身份验证功能：

LandingPage.vue

     authenticate: function(){
         this.authenticated=true
         var credentials = [ this.username, this.password ]
         var Store = require('../store.js')['default'](credentials)
         console.log(Object.keys(Store))
         var self = this;
         Store.getDB().then(val => {
             self.getCategories(Store);
             self.handleChange(Store);
             self.result = val;
             self.$forceUpdate()
         }).catch(err => {
             console.log(err)
         })
     },

这会导致使用Store模块中的函数加载数据。商店看起来像这样：

store.js

var path = require('path')
var dir = require('node-dir')
var mime = require('mime-types')

export default function(credentials){
    var serverName = 'localhost:5984'
    var username = credentials[0]
    var adminPassword = credentials[1]
    var serverUrl = `http://${username}:${adminPassword}@${serverName}`
    var nano = require('nano')(serverUrl)
    var documentation = nano.use('documentation')

    return {
        getDB: function(){
            return new Promise(function(accept, reject){
                nano.db.get('documentation', function(err, body) {
                    if (!err) {
                        console.log(body);
                        accept(body)
                    }
                });
            })
        },
        getCategories: function(){
             var self=this
             return new Promise(function(accept, reject){
                  documentation.view('categories', 'list', {"reduce": false}, function(err, body) {
                      if (!err) {
                         accept(body.rows)
                      }
                      else {
                         console.log(err)
                      }

                  })
             })
         }
}

是否有更好的方法来存储凭据，以便：

刷新后不会丢失，
对于有JavaScript访问权限的人来说，它们不会在浏览器中公开吗？

如何在模块要求所需的Vue应用程序中存储凭据

0 个答案: