// 1. Create the Vuex plugin (src/store/vuex.plugin.casl.ts)
import { Ability, createAliasResolver, detectSubjectType as defaultDetector } from "@casl/ability";
import { BaseModel } from "@/@src/store/feathers/client.js";
const detectSubjectType = (subject) => {
if (typeof subject === "string") return subject;
if (!(subject instanceof BaseModel)) return defaultDetector(subject);
return subject.constructor.servicePath;
};
const resolveAction = createAliasResolver({
update: "patch",
read: ["get", "find"],
delete: "remove"
});
const ability = new Ability([], { detectSubjectType, resolveAction });
const caslPlugin = (store) => {
store.registerModule("casl", {
namespaced: true,
state: { ability, rules: [] },
mutations: {
setRules(state, rules) {
state.rules = rules;
state.ability.update(rules);
}
}
});
store.subscribeAction({
after: (action, state) => {
if (action.type === "auth/responseHandler") {
const { rules } = action.payload;
if (!rules || !state.auth.user) {
store.commit("casl/setRules", []);
return;
}
store.commit("casl/setRules", rules);
} else if (action.type === "auth/logout") {
store.commit("casl/setRules", []);
}
}
});
};
export { ability, caslPlugin };
// 2. Insert into store (src/store/index.ts)
import { caslPlugin } from '@/store/vuex.plugin.casl';
export const store = new Vuex.Store({
plugins: [caslPlugin],
});
// 3. Register @casl/vue plugin (main.ts)
import Vue from "vue";
import { abilitiesPlugin } from "@casl/vue";
import { store } from "@/store";
Vue.use(abilitiesPlugin, store.state.casl.ability);