0

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

用户会看到以下 HTML，这是凭据信息的来源。

登陆页面.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>

这是身份验证功能：

登陆页面.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)
                      }

                  })
             })
         }
}

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

  1. 它们不会在刷新时丢失，

  2. 它们不会在浏览器中公开给任何有 JavaScript 访问权限的人访问吗？

4

0 回答 0