Store Persist State to URL Nuxt Js

Multi-tenancy become more complex problem for authentication and authorization. Nuxt js as front-end app need to adapte to this problem

The scenario :

• Nuxt Js is a front-end App,
• a user can login as company 1 or company 2. each company have an id.
• when hit an API, front-end must send company id

The problem is, how to make Front-end store company id and can be used when Request API. I have some approach to store company id but only 1 way to solve this problem.

Token

You can store company id on token, this is good from API perspective immediately know user information, but you need to recall API to re-create token if user change company id, which is this is not ideal when user switch to other company id periodically

Localstorage

Localstorage is deadly simple to store information in browser client. we can store it to localstorage and use it when it needed. But, the problem is when we want to use on Server Side. Since Nuxt Js Support Server Side Rendering, nuxt cannot read localstorage because localstorage only accessable on client side.

State Management (Vuex)

State management solve problem localstorage to access from Server Side and accessable from any page on website. But, the problem is state management will be reset when user refresh the page.

Param URL

We can store some variable on Parameter URL and use the param when it needed, it persistence and user know 'where are they' only from URL.

I see this is the absolute solution to store company id or other variable. Google do this for a long time, when you logged in to google with different account, google
store state current user on query URL

How to Google store user logged in on URLHow to Google store user logged in on URL (Gmail.com)Quite a nice idea. But we found new problem, we should add query or param to every <a href /> tags. Every programmer never do it manually. Lets create Middleware to solve this problem

Automatically Query Url Update Middleware Nuxt (AQUUMN)
I have no idea about this technique name
We need something to update query URL every change route, we can do this in Middleware that provide by Nuxt Js (because we use Nuxt Js). We will store the company id in State Management and URL, you got the point right ?. We will create middleware with flow like this :
Whenever User change Route, get the Company id from state management
Redirect user to new URL that Query company id included
Whenever browser refresh the page, state management will be reset and we need to restore from URL query company id

Now we have persist parameter user's company id on URL, no matter what URL requested because middleware will put Query company id to URL.
Middleware Code
First of all, we need to create state management for company id. In this case I use Vuex. This is companyStore.js

export const state = () => ({
  companyId: null
})
export const mutations = {
  setCompanyId(state:any, companyId:string){
    state.companyId = labId
  }
}
Create new middleware called authApp.ts in folder middleware (if there is no folder middleware, create one).
import { Context } from "@nuxt/types"
export const companyId = "companyId"
/**
* this middleware make apps to require query `companyId`
* ex: /home/?companyId=123-24123-4123
*/
export default function(context:Context){
  let excludeRoute = [
    "/login",
    "/login/app"
  ]
  let companyIdQuery = context.query[companyId]
  let companyIdStore = context.store.state.companyStore[companyId]
  if(!companyIdQuery){
    if(companyIdStore){
      return context.redirect(context.route.path + "?companyId=" +     companyIdStore)
      }
    if(!excludeRoute.includes(context.route.path)){
      return context.redirect('/login/app');
    }
  }
  else {
  if(!companyIdStore){
    context.store.commit('companyStore/setcompanyId', companyIdQuery)
  } else {
    if(companyIdStore !== companyIdQuery){
      context.store.commit('companyStore/setcompanyId', companyIdQuery)
      }
    }
  }
}

I add array excludeRoute as a route redirect if company id is null, user require to select their current company that selected on the app.
lastly, register this middleware to nuxt.config.js

router: {
  middleware: ['authApp', ...]
},

You can get the company id from $route or $store

let companyIdStore = this.$store.state.companyStore.companyId
let companyIdRoute = this.$route.query.companyId

Finish
That's it how I solve this problem, I didn't found another article write about Nuxt to create persistence state like this, so I create one. Hope this help you.