Skip to main content

Using Warrant with Vue.js

The Warrant Vue.js SDK allows you to securely add authorization & access control checks directly into your Vue.js application to show/hide pages, components, and other content that requires privileged access. The SDK interacts directly with the Warrant API using short-lived session tokens that must be created server-side using your API key. Refer to our guide on Creating Session Tokens to learn how to generate session tokens you can pass to the Warrant React SDK to start performing client-side access checks.

The following guide assumes that you already have a Warrant account and corresponding API and Client keys. If you don't already have an account, you can sign up for one here.

note

The Warrant Vue.js SDK is intended for use in client-side applications to perform access checks that dictate the rendering of pages and components. Always ensure that server-side actions which modify state in your application (ex: an API call that writes to the database) are protected using one of Warrant's server-side SDKs. To learn how to add server-side access checks using Warrant, refer to our quickstart guide on Authorizing Users.

Install the SDK

Run the following command in your project directory to install the Warrant Vue.js SDK:

npm install @warrantdev/vue-warrant

Configure the Warrant Plugin

The Warrant Vue.js SDK includes a plugin that provides utility methods for performing access checks anywhere in your app. Add the plugin to your Vue.js application, passing it your Client Key using the clientKey prop.

// main.js
import Vue from "vue";
import router from "./router";
import App from "./App.vue";
import { Warrant } from "@warrantdev/vue-warrant";

Vue.config.productionTip = false;

Vue.use(Warrant, {
clientKey: "client_test_f5dsKVeYnVSLHGje44zAygqgqXiLJBICbFzCiAg1E=",
});

new Vue({
router,
// store,
render: h => h(App)
}).$mount("#app");

You should now be able to access the plugin as this.$warrant in methods.

Set the Session Token

To finish initializing the plugin you must call the setSessionToken plugin method with a valid session token. This allows the plugin to make access check requests to the Warrant API. Refer to our guide on Creating Session Tokens to learn how to generate a session token for the SDK. We recommend generating session tokens users during your application's authentication flow. You can then return the token to the client and use it to initialize the plugin. Here's an example of what that might look like:

<!-- Login.vue -->
<template>
<form @submit.prevent="onSubmit(email, password)">
<!-- email & password inputs, etc. -->
</form>
</template>

<script>
export default {
name: "login",
data() {
return {
email: null,
password: null,
};
},
methods: {
async onSubmit(email, password) {
const response = await login(email, password);

// NOTE: This session token must be generated
// server-side when logging users into your
// application and then passed to the client.
// Access check calls in this library will fail
// if the session token is invalid or not set.
this.$warrant.setSessionToken(response.data.warrantSessionToken);

//
// Redirect user to logged in page
//
}
}
};
</script>

The plugin is now initialized and you can start authorizing actions in your app! Read on to learn about the different methods and components you can use to check access in your app.

authorize Middleware

authorize is a vue-router navigation guard that can be used to secure components rendered by vue-router with a warrant.

Use the authorize middleware to only render a component via vue-router if the user has a specific warrant:

<template>
<div>My Super Secret Component</div>
</template>

<script>
import { authorize } from "@warrantdev/vue-warrant";

export default {
beforeRouteEnter: authorize({
objectType: "secret",
objectIdParam: "secretId",
relation: "viewer",
redirectTo: "/",
})
}
</script>

hasWarrant

hasWarrant is a plugin method that returns a Promise which resolves to true if the user has the warrant with the specified objectType, objectId, and relation and resolves to false otherwise.

Use hasWarrant for fine-grained conditional rendering or for specific logic within components:

<template>
<div v-if="protectedInfo">
<protected-info>{{ protectedInfo }}</protected-info>
</div>
</template>
<script>
export default {
data() {
protectedInfo: null,
},
async created() {
if (await this.$warrant.hasWarrant("info", "protected_info", "viewer")) {
// request protected info from server
}
}
};
</script>

ProtectedView

ProtectedView is a utility component you can wrap around markup or components that should only be displayed for users with a specified warrant. It only renders the components it wraps if the user has the given warrant.

<template>
<div>
<my-public-component/>
<protected-view
:objectType="'myObject'"
:objectId="object.id"
:relation="'view'"
>
<my-protected-component/>
</protected-view>
</div>
</template>
<script>
import { ProtectedView } from "@warrantdev/vue-warrant";

export default {
components: {
ProtectedView,
}
};
</script>