Example of CASL based auhorization integration with Vue + Vuex + REST API
License: MIT License
I'm a Full Stack Open Source developer, building apps, managing different insfrastructure and sometimes other people.
I login [email protected]
add a post, but I just can read.
How to open the permission to update & delete this post?
thank you~
I can be able to check for permission using v-if-thing. But if I try to add beforeEach hook in app.js, the this.$can() become undefined.
How can I use this library to test in beforeEach as router must be defined before the Vue() is initialized
I try to install the dependencies and always result in the following error:
Console output
[...]
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-2d233489/fp/zipAll.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-8cbf4559/fp/zipWith.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-a8686903/fp/zipObjectDeep.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-2d233489/fp/zipObj.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-2d233489/fp/zipObject.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-a8686903/fp/zipWith.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-2d233489/fp/zipObjectDeep.js'
npm WARN tar ENOENT: no such file or directory, open '/Volumes/Samsung_T5/private/casl-vue-api-example/node_modules/.staging/lodash-2d233489/fp/zipWith.js'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/enux/.npm/_logs/2020-01-31T09_36_37_228Z-debug.log
Logfile output
14347 silly saveTree ├─┬ [email protected]
14347 silly saveTree │ ├── [email protected]
14347 silly saveTree │ └── [email protected]
14347 silly saveTree ├── [email protected]
14347 silly saveTree ├── [email protected]
14347 silly saveTree └── [email protected]
14348 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...4.0","lodash.uniq":"^'
14348 verbose stack at JSON.parse (<anonymous>)
14348 verbose stack at parseJson (/usr/local/lib/node_modules/npm/node_modules/json-parse-better-errors/index.js:7:17)
14348 verbose stack at /usr/local/lib/node_modules/npm/node_modules/node-fetch-npm/src/body.js:96:50
14348 verbose stack at processTicksAndRejections (internal/process/task_queues.js:85:5)
14349 verbose cwd /Volumes/Samsung_T5/private/casl-vue-api-example
14350 verbose Darwin 19.2.0
14351 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
14352 verbose node v12.6.0
14353 verbose npm v6.13.1
14354 error Unexpected end of JSON input while parsing near '...4.0","lodash.uniq":"^'
14355 verbose exit [ 1, true ]
git clone https://github.com/stalniy/casl-vue-api-example.gitcd casl-vue-api-examplenpm installI tried it with deleting my package-lock.json but it didn't help me.
This line up here seems not working or I might be expecting something wrong. This supposed to update what? this is right after createSession is committed? seems that the ability var here is native only to that instance of the code. and I am not seeing results when I check $vm0.$ability in the console or even from vue dev tool.
I for now export ability var and assign it to the abilitiesPlugin like what you did here https://medium.com/dailyjs/casl-and-cancan-permissions-sharing-between-ui-and-api-5f1fa8b4bec. So it seems conflicting on your medium article and the actual code in the repo
I am currently trying to integrate casl/vue into Nuxt.js framework (based on Vuejs).
Nuxt has auth module (with axios) that is very similar to this api example.
Nuxtjs auth set mutation type to 'auth/SET' but with value 'local', I followed this example and did the followings.
// nuxt.config.js
plugins: {
{ src: '~/plugins/vue-casl', ssr: false },
}// plugins/vue-casl.js
// this is where Vue plugins has to register
import Vue from 'vue'
import { abilitiesPlugin } from '@casl/vue'
import { ability } from '~/plugins/vuex-casl'
Vue.use(abilitiesPlugin, ability)// plugins/vuex-casl.js
import { Ability } from '@casl/ability'
export const ability = new Ability()
export const abilitiesPlugin = (store) => {
// ability.update(store.state.auth.user.rules)
return store.subscribe((mutation, state) => {
if(mutation.type == 'auth/SET') {
if(state.auth.user) {
ability.update(state.auth.user.rules)
}
}
})
}// store/index.js
// this is where Vuex plugins has to be registered
import { ability as appAbility, abilitiesPlugin } from '~/plugins/vuex-casl'
export const ability = appAbility
export const plugins = [abilitiesPlugin]I am getting error likes _vm.$can is not a function when browser reload the page.
Is there something I am doing wrong? Could you please provide casl-nuxt-api-example also?
EDIT: above mentioned error only occurs in SSR mode
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.