stalniy / casl-vue-api-example Goto Github PK
View Code? Open in Web Editor NEWExample of CASL based auhorization integration with Vue + Vuex + REST API
License: MIT License
Example of CASL based auhorization integration with Vue + Vuex + REST API
License: MIT License
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.git
cd casl-vue-api-example
npm install
I tried it with deleting my package-lock.json but it didn't help me.
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
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
I login [email protected]
add a post, but I just can read.
How to open the permission to update & delete this post?
thank you~
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.