Skip to content

Instantly share code, notes, and snippets.

@beardcoder beardcoder/auth.ts forked from AndreaMinato/auth.ts
Created Jul 19, 2019

Embed
What would you like to do?
Typescript Vuex Module
import axios, { AxiosRequestConfig } from "axios";
import router from "@/router"; //shortcut to src
import { Module } from "vuex";
const authModule: Module<any, any> = {
state: {
loggedIn: false,
loginError: null,
username: null
},
getters: {
humanLoginError(state: any) {
return state.loginError || "";
}
},
mutations: {
loggedIn(state: any, payload) {
state.loggedIn = true;
state.loginError = null;
state.username = payload.username || "";
router.push("/");
},
loggedOut(state: any) {
state.loggedIn = false;
router.push("/login");
},
loginError(state: any, payload) {
state.loginError = payload;
}
},
actions: {
async login({ commit }, payload) {
commit("changeAppLoadingState", true);
var formData = new FormData();
formData.append("username", payload.name);
formData.append("password", payload.pwd);
axios({
method: "post",
url: "/auth/login",
data: formData
})
.then(response => {
commit("loggedIn", { username: response.data.name });
commit("changeAppLoadingState", false);
})
.catch(error => {
commit("loginError", error.response.data || "GENERAL_ERROR");
commit("changeAppLoadingState", false);
});
},
async logout({ dispatch, commit }) {
axios({
method: "post",
url: "/auth/logout"
})
.then(response => {
commit("clearNavigationState");
commit("loggedOut");
})
.catch(error => {
commit("clearNavigationState");
commit("loggedOut");
});
}
}
};
export default authModule;
import { Module } from "vuex";
import BreadCrumbItem from "@/classes/BreadcrumbItem";
const navigationModule: Module<any, any> = {
state: {
currentPosition: null,
breadcrumb: []
},
getters: {},
mutations: {
addLevelToNavigation(state: any, item: BreadCrumbItem) {
if (state.currentPosition) {
state.breadcrumb.push(state.currentPosition);
}
state.currentPosition = item;
},
removeLevelFromNavigation(state: any) {
state.currentPosition = state.breadcrumb.pop();
},
clearNavigationState(state: any) {
state.currentPosition = null;
state.breadcrumb = [];
}
},
actions: {}
};
export default navigationModule;
import Vue from "vue";
import Vuex from "vuex";
import storage from "vuejs-storage";
import auth from "./modules/auth";
import navigation from "./modules/navigation";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth,
navigation
},
state: {
isAppLoading: false
},
mutations: {
changeAppLoadingState(state: any, appLoadingState) {
state.isAppLoading = appLoadingState;
}
},
actions: {},
plugins: [
storage({
namespace: "test_session",
storage: window.sessionStorage,
keys: [
"auth.loggedIn",
"navigation.breadcrumb",
"navigation.currentPosition"
]
}),
storage({
namespace: "test_local",
keys: ["auth.username"]
})
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.