cookies and http.js file in vuex



  • In vuex I pass in a custom http.js file that has access to my api. Before I was using localstorage but its not good practice for auth. So I’m looking into a different solution. I was wondering if anyone encountered this type of set up and or if I’m passing this correctly?

    old http file:

    export default {
      baseURL: "/",
      onError(error) {
        switch (error.response.status) {
          case 401:
            this.onUnauthorised(error);
            break;
          case 404:
            this.onNotFound(error);
            break;
          case 422:
            this.onValidationError(error);
            break;
          case 500:
            this.onServerError(error);
            break;
          default:
            this.onGenericError(error);
            break;
        }
        return Promise.reject(error);
      },
      access_token() {
        try {
          return window.localStorage["default_auth_token"];
        } catch (err) {
          err;
        }
      }
    };
    

    new http file:

    import { Cookies } from "quasar";
    
    export default {
      baseURL: "/",
      onError(error) {
        switch (error.response.status) {
          case 401:
            this.onUnauthorised(error);
            break;
          case 404:
            this.onNotFound(error);
            break;
          case 422:
            this.onValidationError(error);
            break;
          case 500:
            this.onServerError(error);
            break;
          default:
            this.onGenericError(error);
            break;
        }
        return Promise.reject(error);
      },
      access_token() {
        try {
          return Cookies.get["default_auth_token"];
        } catch (err) {
          err;
        }
      }
    };
    

    vuex file:

    import Vue from "vue";
    import Vuex from "vuex";
    import VuexORM from "@vuex-orm/core";
    import Item from "../store/models/Item";
    import item from "../store/modules/item";
    import VuexORMAxios from "@vuex-orm/plugin-axios";
    import http from "../store/http";
    import createPersistedState from "vuex-persistedstate";
    import User from "../store/models/User";
    import Sort from "../store/models/Sort";
    import Recipe from "../store/models/Recipe";
    import recipeData from "./recipeData/recipeData";
    
    Vue.use(Vuex);
    
    const database = new VuexORM.Database();
    database.register(Item, item);
    database.register(User);
    database.register(Sort);
    database.register(Recipe);
    
    VuexORM.use(VuexORMAxios, {
      database,
      http
    });
    
    const VuexORMPlugin = VuexORM.install(database);
    
    export default function({ ssrContext }) {
      const plugins = [];
      plugins.push(VuexORMPlugin);
    
      if (!ssrContext) {
        plugins.push(
          createPersistedState({
            filter: ({ payload }) => (payload ? payload.entity !== "users" : true)
          })
        );
      }
    
      const Store = new Vuex.Store({
        modules: {
          // example
          recipeData
          // indexData
        },
    
        plugins,
    
        // enable strict mode (adds overhead!)
        // for dev mode only
        strict: process.env.DEV
      });
    
      return Store;
    }
    

Log in to reply