How to store credentials in Vue app needed for module requirement

Question

I've developed a Vue app that gets its data from a CouchDB backend only after a user has logged in with the right credentials. The current state requires the user to enter login info every time the browser is reloaded, and also leaves the login info exposed in the browser. I'm looking for a way to save the credentials (as cookies, possibly, and preferably a vue-centric way), so they can be used to require a module that needs them.

The user sees the following HTML, whence the credential info comes.

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>

Here is the authenticate function:

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)
         })
     },

This causes data to be loaded that is fetched using functions from the Store module. Store looks like this:

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)
                      }

                  })
             })
         }
}

Is there a better way to store the credentials so that:

1. they won't be lost on refresh,

2. they won't be exposed in the browser for anyone w/ JavaScript access to access?