I'm trying to utilize CASL in my project. I've found it unreasonable to collect and send all the data for a bunch of dynamic pages. I utilize OAuth which provides details about what the user can access. The only issue is I need to collect more data than just that through further requests to third party resources. This means it is unfeasible to create a rules object for the entire site that contains this data as the requests would be extremely performance-hindering on that scale.
The flow of data for this specific instance is as follows:
- User signs in with Discord OAuth
- A request is made to gather their Guilds
- A page displays showing their guilds filtered out by certain information
- The user selects one of many guilds to load
- A request is made to the server to collect user rules for that guild specifically
- CASL loads this data to use in can() and cannot()
- Those rules are used to display and hide elements based on permissions collected from a database and Discord
I got this working fantastic without the use of the vue plugin for CASL. The issue I run into now is reactivity. I tried to just copy how CASL Vue does reactivity, but it complains about how it collects the actual data and how "this" key is undefined, thus causing errors.
I am looking for a solution that allows reactivity while pulling CASL data on a per-page basis without crossing into other pages.
const { pending, caslPending, refresh: refreshCASL, data: caslData } = useLazyFetch("/api/acl/guild/" + guildId.value, {
server: false
});
import { PureAbility } from "@casl/ability";
const caslPureAbility = new PureAbility(caslPending ? {} : caslData, {
detectSubjectType: (object) => object.constructor.name
});
// caslData changed watch
watch(caslData, (newData) => {
caslPureAbility.update(newData);
});
In this code, caslPureAbility.can() and .cannot() work great after the data is loaded properly. However, it is not reactive. This code example does not utilize CASL Vue (because of the errors and lack of flexibility). I've searched for hours looking for a solution and trying different options.