{"id":18812402,"url":"https://github.com/warrant-dev/vue-warrant","last_synced_at":"2025-04-13T21:13:28.559Z","repository":{"id":48144801,"uuid":"393241004","full_name":"warrant-dev/vue-warrant","owner":"warrant-dev","description":"Vuejs Client SDK for Warrant","archived":false,"fork":false,"pushed_at":"2024-06-03T19:14:08.000Z","size":397,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-13T21:13:20.581Z","etag":null,"topics":["abac","access-control","acl","attribute-based-access-control","authorization","authz","permissions","rbac","role-based-access-control","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/warrant-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-06T03:49:22.000Z","updated_at":"2024-06-03T19:14:12.000Z","dependencies_parsed_at":"2024-06-03T22:13:00.667Z","dependency_job_id":null,"html_url":"https://github.com/warrant-dev/vue-warrant","commit_stats":{"total_commits":27,"total_committers":5,"mean_commits":5.4,"dds":0.4444444444444444,"last_synced_commit":"80c46eec38a38a60999b9a1e3c458318962373da"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fvue-warrant","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fvue-warrant/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fvue-warrant/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/warrant-dev%2Fvue-warrant/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/warrant-dev","download_url":"https://codeload.github.com/warrant-dev/vue-warrant/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248782260,"owners_count":21160717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abac","access-control","acl","attribute-based-access-control","authorization","authz","permissions","rbac","role-based-access-control","vue","vuejs"],"created_at":"2024-11-07T23:32:41.742Z","updated_at":"2025-04-13T21:13:28.534Z","avatar_url":"https://github.com/warrant-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @warrantdev/vue-warrant\n\n[![npm](https://img.shields.io/npm/v/@warrantdev/vue-warrant)](https://www.npmjs.com/package/@warrantdev/vue-warrant)\n\n## Overview\nThe Warrant Vuejs library provides a plugin, `vue-router` middleware, and components for controlling access to pages and components in Vuejs using [Warrant](https://warrant.dev/). The library interacts directly with the Warrant API using short-lived session tokens that must be created server-side using your API key. Refer to [this guide](https://docs.warrant.dev/guides/creating-session-tokens) to see how to generate session tokens for your users.\n\n## Installation\n\nUse `npm` to install the module:\n\n```sh\nnpm install @warrantdev/vue-warrant\n```\n\n## Usage\n\n### Plugin\nAdd the Warrant plugin to your Vuejs app, passing it your Client Key using the `clientKey` config option. The plugin allows you to access utility methods for performing access checks anywhere in your app.\n```js\n// main.js\nimport Vue from \"vue\";\nimport router from \"./router\";\nimport App from \"./App.vue\";\nimport { Warrant } from \"@warrantdev/vue-warrant\";\n\nVue.config.productionTip = false;\n\nVue.use(Warrant, {\n    clientKey: \"client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E=\",\n});\n\nnew Vue({\n    router,\n    // store,\n    render: h =\u003e h(App)\n}).$mount(\"#app\");\n```\n\n#### **Setting the Session Token**\nIn order to finish initializing the plugin and begin performing access checks in your app, you must provide a server-generated session token and set it using the `setSessionToken` plugin method. Otherwise requests from your Vuejs application will be denied by the Warrant API.\n\nSet the session token using the `setSessionToken` plugin method:\n```vue\n// Login.vue\n\u003ctemplate\u003e\n    \u003cform @submit.prevent=\"onSubmit(email, password)\" class=\"login-form\"\u003e\n        \u003c!-- email \u0026 password inputs, etc. --\u003e\n    \u003c/form\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n    name: \"login\",\n    data() {\n        return {\n            email: null,\n            password: null,\n        };\n    },\n    methods: {\n        async onSubmit(email, password) {\n            const response = await login(email, password);\n\n            // NOTE: This session token must be generated\n            // server-side when logging users into your\n            // application and then passed to the client.\n            // Access check calls in this library will fail\n            // if the session token is invalid or not set.\n            this.$warrant.setSessionToken(response.data.warrantSessionToken);\n\n            //\n            // Redirect user to logged in page\n            //\n        }\n    }\n};\n\u003c/script\u003e\n```\n\n### `hasWarrant(warrantCheck)`\n`hasWarrant` is a plugin method that returns a `Promise` which resolves with `true` if the user for the current session token has the specified `warrants` and returns `false` otherwise. Use it for fine-grained conditional rendering or for specific logic within components.\n\nUsing `hasWarrant` plugin method:\n```vue\n\u003ctemplate\u003e\n    \u003cdiv v-if=\"protectedInfo\"\u003e\n        \u003cprotected-info\u003e{{ protectedInfo }}\u003c/protected-info\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n    data() {\n        protectedInfo: null,\n    },\n    async created() {\n        const isAuthorized = await this.$warrant.hasWarrant({\n            warrants: [{\n                objectType: \"info\",\n                objectId: \"protected_info\",\n                relation: \"viewer\",\n            }]\n        });\n        if (isAuthorized) {\n            // request protected info from server\n        }\n    }\n};\n\u003c/script\u003e\n```\n\n### `authorize` Middleware\n`authorize` is a `vue-router` middleware function you can use in components rendered by `vue-router` to easily protect your routes behind a warrant.\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003eMy Super Secret Component\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { ProtectedView, authorize } from \"@warrantdev/vue-warrant\";\n\nexport default {\n    beforeRouteEnter: authorize({\n        warrants: [{\n            objectType: \"secret\",\n            objectId: \"secretId\",\n            relation: \"viewer\",\n        }],\n        redirectTo: \"/\",\n    })\n}\n\u003c/script\u003e\n```\n\n### `ProtectedView`\n`ProtectedView` is a utility component you can wrap around markup or components that should only be accessible to users with certain privileges. It only renders the components it wraps if the user has the given warrant.\n```vue\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cmy-public-component/\u003e\n        \u003cprotected-view\n            :warrants=\"warrants\"\n        \u003e\n            \u003cmy-protected-component/\u003e\n        \u003c/protected-view\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { ProtectedView } from \"@warrantdev/vue-warrant\";\n\nexport default {\n    components: {\n        ProtectedView,\n    },\n    data: function() {\n        return {\n            warrants: [{\n                objectType: \"myObject\",\n                objectId: this.$route.params.objectId,\n                relation: \"view\",\n            }]\n        };\n    },\n};\n\u003c/script\u003e\n```\n\n## Support for Multiple Warrants\n\n`warrants` contains the list of warrants evaluted to determine if the user has access. If `warrants` contains multiple warrants, the `op` parameter is required and specifies how the list of warrants should be evaluated.\n\n**anyOf** specifies that the access check request will be authorized if *any of* the warrants are matched and will not be authorized otherwise.\n\n**allOf** specifies that the access check request will be authorized if *all of* the warrants are matched and will not be authorized otherwise.\n\n```javascript\n// User is authorized if they are a 'viewer' of protected_info OR a 'viewer' of 'another_protected_info'\nconst isAuthorized = await this.$warrant.hasWarrant({\n    op: \"anyOf\",\n    warrants: [{\n        objectType: \"info\",\n        objectId: \"protected_info\",\n        relation: \"viewer\",\n    }, {\n        objectType: \"info\",\n        objectId: \"another_protected_info\",\n        relation: \"viewer\",\n    }]\n});\n```\n\n## Notes\nWe’ve used a random Client Key in these code examples. Be sure to replace it with your\n[actual Client Key](https://app.warrant.dev) to\ntest this code through your own Warrant account.\n\nFor more information on how to use the Warrant API, please refer to the\n[Warrant API reference](https://docs.warrant.dev).\n\n## TypeScript support\n\nThis package includes TypeScript declarations for Warrant.\n\nNote that we may release new [minor and patch](https://semver.org/) versions of\n`@warrantdev/vue-warrant` with small but backwards-incompatible fixes to the type\ndeclarations. These changes will not affect Warrant itself.\n\n## Warrant Documentation\n\n- [Warrant Docs](https://docs.warrant.dev/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarrant-dev%2Fvue-warrant","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwarrant-dev%2Fvue-warrant","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwarrant-dev%2Fvue-warrant/lists"}