DEV Community: Mark Anderson

Auto Redirect Vue 401

Mark Anderson — Thu, 13 Feb 2020 18:05:48 +0000

This is a quick note so I don't lose this. If you need to redirect based on a status code and are using vuex this might be helpful. I have a getter I call api that returns an Axios instance so I can add the JWT to the headers. I needed to handle 401's for bookmarks etc. You will need to import axios and router at the top of your store so you can re-direct. I redirect to log out which takes care of wiping out the old token on the way to the login page. You will want to remove the Authorization header and either set SET_ME values or remove the lines they appear in as well. I think it may help to have them in the code since it's a sample of what can be done. I set the SET_ME values using dot env file variables and process.env if that helps anyone.

api: function (state) {
    const axiosInstance = axios.create({
        baseURL: 'SET_ME',
        timeout: 5000,
        withCredentials: false,
        headers: {
            "Content-Type": "application/json;charset=UTF-8",
            "Accept": "application/json",
            "Access-Control-Allow-Origin": 'SET_ME',
            "Authorization": state.jwt
        }
    });
    axiosInstance.interceptors.response.use(function (response) {
        return response;
    }, function (error) {
        if (401 === error.response.status) {
            router.push("/logout");
            return Promise.resolve(error.response);
        } else {
            return Promise.reject(error);
        }
});
    return axiosInstance;
}

You can access the api with. this.$store.getters.api but I have it included as api using a mixin the bring common things to each page. Hope this helps.

Single End Point for Multipe Vuejs Applications Using Nginx

Mark Anderson — Thu, 13 Feb 2020 13:54:37 +0000

Overview

To have a single point of entry into the multiple vue applications simplifies management. We allow one IP access into our Nginx server that makes calls deeper into our network to a single internal server that runs many vue applications. This allows a single SSL certificate. Minimal firewall rule changes, we ask from small range increases at a time for new internal app ports. i.e. 8000-8010 then 8011-8020, etc.

Vue

I'll cover the vue configuration first since this approach can back end agnostic. In our case, we will be using a node/express backend. To get this working you'll need to set a base path route for each application and map it to an internal port. For this example, we'll use /example and 8000. Start by setting up the base path within vue. This is managed by a file at the base level of your vue app, the same level as package.json. Create vue.config.js at the application base.

module.exports = {
    publicPath: "/example/"
}

dot env files

This section assumes you develop with a local server instance, it is running on a different port, it is running on port 8910. To this end I have two configuration files.

// .env.development
VUE_APP_API_BASE=http://localhost:8910/api/1.0
VUE_APP_MODE=development
Access_Control_Allow_Origin=http://localhost:8080

// .env.production
VUE_APP_API_BASE=https://apps.western.edu/example/api/1.0
VUE_APP_MODE=production
Access_Control_Allow_Origin=https://apps.western.edu

The VUE_APP_API_BASE variable is picked up and used to route calls appropriately based on the NODE_ENV variable value, i.e. production or development. The Access_Control_Allow_Origin variable is so cors protection will allow us to access the server in either environment without having to change anything but the NODE_ENV variable. These files are also at the base of the vue application.

vuex

I use a vuex file named store.js to provide an Axios base instance with the VUE_APP_API_BASE. This is done by creating an API getter in the store.js file. This uses the environment variables. Additionally, this is where I set my JWT value in the headers. I've removed it from this example but I have one more header "Authorization": state.jwt.

...
getters: {
        api: function(state) {
            return axios.create({
            baseURL: process.env.VUE_APP_API_BASE,
            timeout: 5000,
            withCredentials: false,
            headers: {
                "Content-Type": "application/json;charset=UTF-8",
                "Accept": "application/json",
                "Access-Control-Allow-Origin": process.env.Access_Control_Allow_Origin
              }
            });
        }
...

Node and Express Server

For the server, I'll use Node and Express. We again use configuration files. The key elements are two environment variables.

# Make sure these are set appropriately in your environment before
# starting your server.
export express_port=8910
export cors_origin='http://localhost:8080'

In production, you'll set the express_port to the available port you have designated for the server. In our case 8000 on the server. You should not need cors_origin in production since we serve our vue instance through our node/express instance that also serves our API. Set this accordingly in production. In development, we assume the default npm run serve port.

You need to configure express to use process.env.express_port for the listening port. You will also need to set up your cors origin to process.env.cors_origin.

I also set the express to server a /public dirctory. This is where I copy everything generated from npm run build's /dist directory.

Nginx

We will configure to route /example to the server and strip off the /example portion of the path when calling the internal API. In your Nginx configuration file, you'll need to configure the /example location.

    location /example {
       # This is plain http not https.
       # This server, Nginx, has the SSL cert on 443
       rewrite ^/example/(.*) /$1 break;
       proxy_pass http://internal-server.example.con:8000/;
    }

The keys here are the location section which allows us to route based on the path. The second section is the rewrite wich allows us to strip off the /example/ portion of the url before proxying the connection back to the internal server actually running the application. You can setup as many locations as you need in this fashion and Nginx will route each one based on the path back to the appropriate path and port on our internal server.

Conclusion

I use this to serve may applications. All come into the Nginx server and then get routed back to the internal server. The main advantages for me are one SSL certificate and external IP for all. Security is focused on the external/DMZ server first. This approach requires the setting of NODE_ENV, express_port, and cors_orign when working locally. Other than these changes the same code should work local and on the server.

Vuex Shopping Cart

Mark Anderson — Mon, 10 Feb 2020 12:45:43 +0000

I initially wrote a shopping cart that pushed every cart transaction to the server. This works well but upon completion of the project, I felt a client-based shopping cart system would be fun to write. It also offered a project to learn Vuex. I'll stick the technical first and then cover my thoughts on the pros and cons of client-side vs server storage for the cart.

I'll start by covering a few design requirements.

* Ability to use compound keys.
* Ability to handle the quantity
* Ability to return items and quantity to a server in Array
* Require no additional libraries beyond vuex

The Code Layout

I think were code lives are as important for maintenance as the layout of the code within the file. To this end, I wanted to break the shopping cart into an individual module and contain it within a single file. This is imported into the primary store file and used as a module. This seems to follow the Vuejs style. Since persistence and shared mutations are not part of the cart directly but design details they can be managed in the store which is the appropriate place I believe.

The Cart Code

Keys

The cartKeys is an array of strings that contain the keys that will be found on cart items. This allows us to pass the keys for deleting and when putting together the final items list to pass to the server. I often run into a need to handle compound keys, especially when modernizing incrementally.

Adding Keys

When adding we check to see if a like item exists first. If the item already exists we increment the number of items. If the item doesn't exist we add quantity to the item and push it to the cart items array.

Deleting Keys

We pass in the keys of the items to be deleted and the number of items to be deleted. If this leaves a quantity less than one we remove the entire item from the cart items array.

Other

I added an easy way clear the cart and get an count of items in the cart. I feel item count is more important then quantity but this code should be easy enough to customize.


export const ShoppingCartModule = {
    state: {
        cartKeys: [],
        cartItems: []
    },
    mutations: {
        cartKeys(state, keys) {
            state.cartKeys = keys;
        },
        addItem(state, newItem) {
            let found = -1;
            for (const cartIndex in state.cartItems) {
                const item = state.cartItems[cartIndex];
                let allMatch = true;
                for (const keyIndex in state.cartKeys) {
                    const keyValue = state.cartKeys[keyIndex];
                    if (item[keyValue] != newItem[keyValue]) {
                        allMatch = false;
                        break;
                    }
                }
                if (allMatch == true) {
                    found = cartIndex;
                    break;
                }
            }
            if (found > -1) {
                state.cartItems[found].quantity += newItem.quantity || 1;
            } else {
                if (newItem['quantity'] == undefined) {
                    newItem.quantity = 1;
                }
                state.cartItems.push(newItem);
            }
        },
        delItem(state, params) {
            let found = -1;
            for (const cartIndex in state.cartItems) {
                const item = state.cartItems[cartIndex];
                let allMatch = true;
                for (const keyIndex in state.cartKeys) {
                    const keyValue = state.cartKeys[keyIndex];
                    if (item[keyValue] != params.itemKeys[keyValue]) {
                        allMatch = false;
                        break;
                    }
                }
                if (allMatch == true) {
                    found = cartIndex;
                    break;
                }
            }
            if (found > -1) {
                state.cartItems[found].quantity -= params.quantity;
                if (state.cartItems[found].quantity < 1) {
                    state.cartItems.splice(found,1)
                }
            } 

        },
        empty(state) {
            state.cartItems = [];
        }
    },
    actions: {
        addItem(context, item) {
            context.commit(item);
        },
        delItem(context, params) {
            context.commit(params);
        },
        cartKeys(context, keys) {
            context.commit(keys)
        },
        empty(context) {
            context.commit()
        }
    },
    getters: {
        itemCount: state => {
            return state.cartItems.length;
        },
        cart: state => {
            return state.cartItems;
        },
        cartKeys: state => {
            return state.cartKeys;
        },
        itemKeys: state => {
            let results = [];
            for (const cartIndex in state.cartItems) {
                const item = state.cartItems[cartIndex];
                let keyRecord = {quantity: item.quantity};
                for (const keyIndex in state.cartKeys) {
                    const keyValue = state.cartKeys[keyIndex];
                    keyRecord[keyValue] = item[keyValue];
                }
                results.push(keyRecord);
            }
            return results;   
        }
    }
}

The Store File

I chose to use a module for code speperation. I didn't namespace because I like the ability to have things available at the root level. If my store methods were to create a collision I'd most likely namespace the shopping cart module but am not able to say for sure.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import {ShoppingCartModule} from "./shopping_cart_module";

export default new Vuex.Store({
    modules: {
      store: ShoppingCartModule
    }
})

The Main File

The one thing of note hear s the es6-promise polyfill. This is required for IE.

import Vue from 'vue'
import store from './store'
import 'es6-promise/auto'

import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

The App.vue File

This is a simple page to show how it works. The submit keys button would make a call to get the keys in the propper format to send to the server. This would be the entire cart and possible the only cart related call made. I would do this before accepting any money etc so you won't loose the items to go with a payment. I'll post some code with the cart entirerly maintaind on the server short of a cart ID next.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Welcome to Your Vue.js App</h1>
    <button v-on:click="add('One')">Add Item One</button>
    <button v-on:click="add('Two')">Add Item Two</button>
    <button v-on:click="del('One', 2)">Del 2 Item Ones</button>
    <button v-on:click="del('Two')">Del Item Two</button>
    <button v-on:click="itemKeys()">Submit Keys</button>
    <h3>Cart</h3>
    <pre>{{cart}}</pre>
    <h3>Keys</h3>
    <pre>{{cartKeys}}</pre>
  </div>
</template>

<script>
export default {
  name: "sample",
  data() {
    return {
      cart: this.cart = this.$store.getters.cart,
      cartKeys: ['name','store'],
      store: 'Gunnison'
    }
  },
  created() {
    this.$store.commit("cartKeys",this.cartKeys);
  },
  methods: {
    add(name) {
      let item = {
        name: name,
        store: this.store,
        price: 12.34,
        descripiton: 'This is the item you need to be a contributing member of society.'
      }
      this.$store.commit("addItem", item);

    },
    del(name, quantity = 1) {
      this.$store.commit("delItem", {
        itemKeys: {store: this.store, name: name}, 
        quantity: quantity
        }
      );
    },
    itemKeys() {
      alert(JSON.stringify(this.$store.getters.itemKeys));
      this.$store.commit('empty')
      this.cart = this.$store.getters.cart;
    }
  }
}
</script>

Thoughts

I found this a fun exercise and believe I now have a reasonable understanding of using vuex. This approach has some risky areas and possibility of loosing data if not expanded. I would generally make sure if taking payment that I have a stored version of the cart first. This would mean the addition of code to maintain a cart ID on the server for those who get to the very last step and then want to make a change. Is this a concern you share?

This approach greatly reduces the number of calls to the server but increases the complexity of the data sent and inserted into storage. If your are working with an object database this approach could require little data manipulation on the server. If tracking inventory, marking sold, etc you will need to parse the data anyway so possible not a large savings. This moves the complexity to the front end which seems risky compaired to a server where you can run the tests. Who knows what browser a client will use, but this intentially uses standard calls. Where do you believe the complexity should exists?

Is this a better approach than pushing all cart storage into server storage? I think like most things in life it depends on your specific use case. I will use this approach for web sites where people want to tag/track items within a session, which is how I believe shopping carts should work. This approach should limit the number of incomplete shopping cart stored and needing cleaned up but that is a simple enough matter. Overall the question of location is to complex to answer without lookig and the system delivering the content and the volume of traffic.

Hopefully someone finds this fun and interesting as well. I'll share the version that uses server cart storage if asked.

Vue Socket.io and Toast Messages

Mark Anderson — Wed, 01 Jan 2020 14:50:40 +0000

I've decided against this solution but am posting it so that others can see/use the example if it fits their needs and so I can explain why I went another route.

This solution breaks "Keep It Simple Stupid" (KISS) for me. i.e. Load balancing is too complex for the trade-off of having direct server communication, Sticky load balancing. For many of the smaller apps, a single server instance is more than adequate. So am I violating "You aren't gonna need it" (YAGNI)? Possibly but since neither WebSockets nor socket.io are currently being used I think it's better to invest research time in an honest comparison/evaluation upfront. I'll post next on a WebSocket example that may prove to be a better solution.

Rather than parse response messages and display them individually upon each request we will have the messages sent back via socket.io to our app and displayed using global message queues for success, info and oops. This is a "minimal" installation for testing/proof of concept. In our case, we will be simulating logging into a server and returning appropriate toasts based on the credentials.

server

We will first create a server.js file to listen to the request. If using node and npm as commands show below I suggest putting it in an src directory.

server.js

var http = require('http');
var app = http.createServer();

// Socket.io server listens to our app
var io = require('socket.io').listen(app);

io.on('connection', function (socket) {
  // You will get this message when the server becomes 
  // available or a new socket it created
  socket.emit('success', {message: 'Server Accecpting Connections'});
  // This will send a message letting users know the server is
  // being sutdown.
  process.on('SIGINT', () => {
    io.emit('oops', {message: 'Server Shut Down'});
    process.exit();
  });
  // This handles the authentication and related messages.
  socket.on('authenticate', function (payload) {
    let data = JSON.parse(payload.data);
    if (data.password == 'passwd' && data.username == 'admin') {
      // This is managed in the Vue.js since it is not a feedback message.
      socket.emit('auth', { jwt: 'Generated JWT Token'} );
      // We emit to two seperate message queues that are handled in store.js
      // so they are universal.
      socket.emit('success', { message: 'You are logged in' });
      socket.emit('info', { message: 'JWT Token Attached', jwt: 'GeneRAtEdJwTOken' });
    } else {
      // error message got picked up so changed to opps handled in store.js
      socket.emit('oops', { message: 'Invalid Credentials Supplied' })
    }
  });
});

app.listen(8910);
console.log('Server listening on 8910');

Using the following command to get started then copy the server.js into the src directory. Once that is done you can start the server using node server.js or node src/server.js.

mkdir server
cd server
npm init
npm install socket.io
mkdir src

Vue Client

Once you have a new minimal vue project you should replace/create the three files listed below. Assuming you were able to create the vue app and replaced/created the files below you should be able to get the client running with npm run serve.

Initialization of vue project

Below are the commands I used to get a test vue instance up and running. The vue create command has question response so run it first then you can copy-paste the rest.

vue create --no-git --bare --skipGetStarted socketio_test_front
cd socketio_test_front
npm install --save vue-socket.io
npm install --save vuex
npm install --save vuex-persist
npm install --save es6-promise
npm install --save vue-toasted

main.js

import Vue from 'vue'
import store from './store'
import App from './App.vue'
import VueSocketIO from 'vue-socket.io'
import Toasted from 'vue-toasted';

Vue.use(Toasted);

// Lets Register a Global Toasts.
Vue.toasted.register('appError',
  (payload) => {
    if (!payload.message) {
      return "Message not definded."
    }
    return payload.message;
  },
  {
    type: 'error'
  });

Vue.toasted.register('appSuccess',
  (payload) => {
    if (!payload.message) {
      return "Message not definded."
    }
    return payload.message;
  }, {
  type: 'success'
});

Vue.toasted.register('appInfo',
  (payload) => {
    if (!payload.message) {
      return "Message not definded."
    }
    return payload.message;
  }, {
  type: 'info'
});

// Now setup our socket and vuex configuration
Vue.use(new VueSocketIO({
  debug: true,
  connection: 'http://localhost:8910',
  vuex: {
    store,
    actionPrefix: 'SOCKET_'
  },
  options: {} //Optional options
}))

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    },
    actions: {
        "SOCKET_oops"(state, server) {
            Vue.toasted.global.appError({
                message: server.message
            }).goAway(1200);
        },
        "SOCKET_success"(state, server) {
            Vue.toasted.global.appSuccess({
                message: server.message
            }).goAway(1200);
        },
        "SOCKET_info"(state, server) {
            Vue.toasted.global.appInfo({
                message: server.message
            }).goAway(1200);
        }

    }
})

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />

    <div v-show="jwt !== null">
      <p>Returned JWT: {{jwt}}</p>
      <p>
        <a @click="logOut" href="#">Log Out</a>
      </p>
    </div>

    <form class="form-signin" @submit.prevent="login" v-show="jwt == null">
      <label for="inputUsername">Username</label>
      &nbsp;
      <input
        v-model="username"
        type="text"
        id="inputUsername"
        placeholder="Username"
        required
        autofocus
      />
      <br />
      <br />
      <label for="inputPassword">Password</label>
      &nbsp;
      <input
        v-model="password"
        type="password"
        id="inputPassword"
        placeholder="Password"
        required
      />
      <p>
        <input type="submit" value="Sign In" />
      </p>
    </form>
  </div>
</template>


<script>
export default {
  name: "vue",
  components: {},
  data() {
    return {
      username: "admin",
      password: "passwd",
      jwt: null
    };
  },
  sockets: {
    auth: function(response) {
      this.jwt = response.jwt;
    }
  },
  methods: {
    login() {
      if (this.$socket.disconnected) {
      this.$toasted.global
        .appError({
          message: "You are not connected to the server!"
        })
        .goAway(1200);
      } else {
      this.$socket.emit("authenticate", {
        data: JSON.stringify({
          username: this.username,
          password: this.password
        })
      });
      }
    },
    logOut() {
      this.jwt = null;
      this.$toasted.global
        .appSuccess({
          message: "Locally Logged Out!"
        })
        .goAway(1200);
    }
  }
};
</script>