URL Nuxt JSへのストア持続状態

マルチテナントは、認証と承認のためのより複雑な問題になります.フロントエンドのアプリとしてNuxt JSはこの問題に適応する必要があります

シナリオ
NYXT JSはフロントエンドアプリ、です
ユーザーは会社1または会社2としてログインできます.各々の会社は、IDを持ちます

APIを打つとき、フロントエンドは会社ID

を送らなければなりません
問題は、フロントエンドのストア会社IDを作成し、リクエストAPIを使用する方法です.私は、この問題を解決する1つの方法だけを会社のIDを格納する方法があります.

トークン
あなたはトークンに会社のIDを格納することができます、これはすぐにユーザーの情報を知っているAPIの視点から良いですが、ユーザーが変更する場合は、トークンを再作成するAPIをリコールする必要があります

局所記憶
LocalStorageは、ブラウザクライアントに情報を格納するために致命的に簡単です.私たちはlocalstorageにそれを格納し、それが必要なときにそれを使用することができます.しかし、問題はサーバー側で使いたいときです.Nuxt JSはサーバ側のレンダリングをサポートしているので、NuxtはLocalStorageをクライアント側でしかアクセスできないため、localstorageを読むことができません.

国家管理
状態管理は、サーバー側からアクセスして、ウェブサイトのどんなページからでもアクセス可能な問題LocalStorageを解決します.しかし、問題は、ユーザーがページを更新するときに状態管理がリセットされることです.

パラメータ
パラメータURLにいくつかの変数を格納し、必要に応じてparamを使うことができます.
私は、これが会社のIDまたは他の変数を格納する絶対的な解決策であるのを見ます.Googleは、長い間、あなたが異なるアカウントでGoogleにログインしたとき、これをします
クエリURLに現在のユーザを格納する


どのようにGoogleストアのユーザーがGoogleストアのユーザーにURLをログインしてログインする方法(Gmail . com)非常に良いアイデア.しかし、私たちは新しい問題を見つけました.すべてのプログラマは手動でそれを行うことはありません.この問題を解決するミドルウェアを作ろう
URLを更新するミドルウェアNuxt
このテクニックの名前はわからない
私たちはすべての変更ルートをクエリURLを更新する必要があります、私たちはNuxt JSによって提供されるミドルウェアでこれを行うことができます.私たちは会社のIDを状態管理とURLに格納します.このような流れでミドルウェアを作ります.
ユーザーがルートを変更するたびに
クエリ会社のIDを含む新しいURLにユーザーをリダイレクトする
ブラウザがページをリフレッシュするたびに、状態管理がリセットされ、URLクエリ会社IDから復元する必要があります
現在、我々はURLの上でパラメタユーザの会社IDを固守します.
ミドルウェアコード
まず第一に、我々は会社のIDのための国家管理を作成する必要があります.これは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)
      }
    }
  }
}

company idがNULLの場合は、ルートのリダイレクトとして配列のexcludeouteを追加します.
最後に、このミドルウェアを<a href />に登録してください

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

あなたは、$ルートまたは$ Storeから会社IDを得ることができます

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

仕上げ
それは私がこの問題を解決する方法ですが、私は別の記事Nuxtについては、このような持続性の状態を作成するために書いて発見したので、私は1つを作成します.このヘルプはあなたを助ける.