vue-casl

├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package.json ├── resources ├── ability.js └── routes.js ├── server.js ├── src ├── App.vue ├── Post.vue ├── ability-plugin.js └── main.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-casl-demo 2 | 3 | > Demo of manage permissions in an authenticated Vue app with CASL 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:3000 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | Check out the article [Managing User Permissions in a VueJS App](https://vuejsdevelopers.com/2018/01/08/vue-js-roles-permissions-casl/) for more info. 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-casl 6 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-casl-demo", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Anthony Gore ", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development nodemon -e js --ignore src/ server.js", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "axios": "^0.17.1", 14 | "casl": "^1.0.6", 15 | "express": "^4.16.2", 16 | "vue": "^2.5.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not ie <= 8" 22 | ], 23 | "devDependencies": { 24 | "babel-core": "^6.26.0", 25 | "babel-loader": "^7.1.2", 26 | "babel-preset-env": "^1.6.0", 27 | "babel-preset-stage-3": "^6.24.1", 28 | "cross-env": "^5.0.5", 29 | "css-loader": "^0.28.7", 30 | "file-loader": "^1.1.4", 31 | "node-sass": "^4.5.3", 32 | "nodemon": "^1.14.7", 33 | "sass-loader": "^6.0.6", 34 | "vue-loader": "^13.0.5", 35 | "vue-template-compiler": "^2.4.4", 36 | "webpack": "^3.6.0", 37 | "webpack-dev-middleware": "^2.0.3", 38 | "webpack-dev-server": "^2.9.1", 39 | "webpack-merge": "^4.1.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /resources/ability.js: -------------------------------------------------------------------------------- 1 | const casl = require('casl'); 2 | 3 | module.exports = function defineAbilitiesFor(user) { 4 | return casl.AbilityBuilder.define( 5 | { subjectName: item => item.type }, 6 | can => { 7 | can(['read', 'create'], 'Post'); 8 | can(['update', 'delete'], 'Post', { user: user }); 9 | } 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /resources/routes.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const router = express.Router(); 3 | const path = require("path"); 4 | const fs = require("fs"); 5 | 6 | let posts = [ 7 | { 8 | type: 'Post', 9 | user: 1, 10 | content: '1 used cat, good condition' 11 | }, 12 | { 13 | type: 'Post', 14 | user: 2, 15 | content: 'Second hand bathroom wallpaper' 16 | } 17 | ]; 18 | 19 | let users = [ 20 | { 21 | id: 1, 22 | name: 'Jeff', 23 | active: false 24 | }, 25 | { 26 | id: 2, 27 | name: 'George', 28 | active: true 29 | } 30 | ]; 31 | 32 | const defineAbilitiesFor = require( './ability'); 33 | let activeUser = users.find(user => user.active); 34 | let ability = defineAbilitiesFor(activeUser.id); 35 | 36 | router.get("/", (req, res) => { 37 | let doc = fs.readFileSync(path.join(__dirname, "../index.html"), 'utf8'); 38 | doc = doc.replace('__DATA__', JSON.stringify({ posts, users }).replace(/"/g, '\\"')); 39 | res.end(doc); 40 | }); 41 | 42 | router.get("/delete/:id", (req, res) => { 43 | let post = posts.find(post => post.user === parseInt(req.params.id)); 44 | if (ability.can('delete', post)) { 45 | posts = posts.filter(cur => cur !== post); 46 | res.json({ success: true }); 47 | } else { 48 | res.json({ success: false }); 49 | } 50 | }); 51 | 52 | module.exports = router; 53 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const middleware = require('webpack-dev-middleware'); 3 | const compiler = webpack(require('./webpack.config')); 4 | const express = require("express"); 5 | const path = require("path"); 6 | 7 | const app = express(); 8 | 9 | app.use(middleware(compiler, { 10 | publicPath : "/dist/" 11 | })); 12 | 13 | app.use(express.static(path.join(__dirname, "dist"))); 14 | 15 | app.use('/', require('./resources/routes')); 16 | 17 | app.listen(3000); 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 15 | 47 | 61 | -------------------------------------------------------------------------------- /src/Post.vue: -------------------------------------------------------------------------------- 1 | 7 | 30 | 50 | -------------------------------------------------------------------------------- /src/ability-plugin.js: -------------------------------------------------------------------------------- 1 | export default function abilitiesPlugin(Vue, ability) { 2 | const bus = new Vue() 3 | const update = ability.update 4 | 5 | ability.update = function updateAndNotify(...args) { 6 | const result = update.apply(this, args) 7 | bus.$emit('ability:update') 8 | return result 9 | } 10 | 11 | Vue.mixin({ 12 | methods: { 13 | $can: ability.can.bind(ability) 14 | }, 15 | beforeCreate() { 16 | this.$forceUpdate = this.$forceUpdate.bind(this) 17 | bus.$on('ability:update', this.$forceUpdate) 18 | }, 19 | beforeDestroy() { 20 | bus.$off('ability:update', this.$forceUpdate) 21 | } 22 | }) 23 | } 24 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import abilityPlugin from './ability-plugin'; 4 | const defineAbilitiesFor = require('../resources/ability'); 5 | 6 | let { posts, users } = JSON.parse(window.data); 7 | let activeUser = users.find(user => user.active); 8 | let ability = defineAbilitiesFor(activeUser.id); 9 | Vue.use(abilityPlugin, ability); 10 | 11 | new Vue({ 12 | el: '#app', 13 | render: h => h(App) 14 | }); 15 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, 20 | { 21 | test: /\.scss$/, 22 | use: [ 23 | 'vue-style-loader', 24 | 'css-loader', 25 | 'sass-loader' 26 | ], 27 | }, 28 | { 29 | test: /\.sass$/, 30 | use: [ 31 | 'vue-style-loader', 32 | 'css-loader', 33 | 'sass-loader?indentedSyntax' 34 | ], 35 | }, 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader', 39 | options: { 40 | loaders: { 41 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 42 | // the "scss" and "sass" values for the lang attribute to the right configs here. 43 | // other preprocessors should work out of the box, no loader config like this necessary. 44 | 'scss': [ 45 | 'vue-style-loader', 46 | 'css-loader', 47 | 'sass-loader' 48 | ], 49 | 'sass': [ 50 | 'vue-style-loader', 51 | 'css-loader', 52 | 'sass-loader?indentedSyntax' 53 | ] 54 | } 55 | // other vue-loader options go here 56 | } 57 | }, 58 | { 59 | test: /\.js$/, 60 | loader: 'babel-loader', 61 | exclude: /node_modules/ 62 | }, 63 | { 64 | test: /\.(png|jpg|gif|svg)$/, 65 | loader: 'file-loader', 66 | options: { 67 | name: '[name].[ext]?[hash]' 68 | } 69 | } 70 | ] 71 | }, 72 | resolve: { 73 | alias: { 74 | 'vue$': 'vue/dist/vue.esm.js' 75 | }, 76 | extensions: ['*', '.js', '.vue', '.json'] 77 | }, 78 | devServer: { 79 | historyApiFallback: true, 80 | noInfo: true, 81 | overlay: true 82 | }, 83 | performance: { 84 | hints: false 85 | }, 86 | devtool: '#eval-source-map' 87 | } 88 | 89 | if (process.env.NODE_ENV === 'production') { 90 | module.exports.devtool = '#source-map' 91 | // http://vue-loader.vuejs.org/en/workflow/production.html 92 | module.exports.plugins = (module.exports.plugins || []).concat([ 93 | new webpack.DefinePlugin({ 94 | 'process.env': { 95 | NODE_ENV: '"production"' 96 | } 97 | }), 98 | new webpack.optimize.UglifyJsPlugin({ 99 | sourceMap: true, 100 | compress: { 101 | warnings: false 102 | } 103 | }), 104 | new webpack.LoaderOptionsPlugin({ 105 | minimize: true 106 | }) 107 | ]) 108 | } 109 | --------------------------------------------------------------------------------

For Sale