How to password protect your website in Vue.js

In this tutorial, I’ll show how to easily protect your website with a password in Vue.js.

Disclaimer: This method will only work against search engines and some users. You shouldn’t use this method for hiding sensitive information because the password will be stored on the front-end.

Router

Let’s start by adding a new meta value meta: { requiresAuth: true } for every route.

{
  path: '/route-path',
  name: 'route-name',
  component: ComponentName,
  meta: {
    requiresAuth: true
  }
}

And then redirect all users who aren’t logged in (entered password in our case) to the new route called “Protected”. This is where the “enter password” form will be.

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (!storageHelper.getItem('user-password')) next('/protected')
    else next()
  } else next()
})

In the example above I’m using storageHelper, it’s not ideal and you should be using Vuex-persist instead.

Protected.vue component

<template>
  <div>
    <div class="container text-center">
      <h2>Please enter password to access this page.</h2>

      <div class="row">
        <div class="col-md-6 offset-md-3">
          <form v-on:submit.prevent="validateBeforeSubmit">
            <div class="form-group text-left">
              <label class="custom-label control-label">Password</label>
              <input class="form-control password-field" type="password" name="password" v-model.trim="password">
              <span class="error help-block" ></span>
            </div>
            <div class="text-danger" v-if="error"><p>Incorrect password.</p></div>
            <button class="btn btn-primary" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import storageHelper from 'storage-helper'
export default {
  data () {
    return {
      error: null,
      password: null
    }
  },
  methods: {
    validateBeforeSubmit () {
      if (this.password === 'replace-this-with-your-password') {
        this.error = false
        storageHelper.setItem('user-password', this.password)
        router.push('home')
      } else {
        this.error = true
      }
    }
  }
}
</script>

That’s it. If the user opens your website for the first time he/she will be redirected to the Protected.vue page. This page will contain a password form.

If they enter a valid password a user-password value will be saved in a localStorage or cookies. And they’ll be able to access your site.

As you can see it’s very primitive but does the job. You can use it to protect your work in progress or side projects.

If you find this post useful, please let me know in the comments below and subscribe to my newsletter. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-password-protect

PS: Make sure you check other Vue.js tutorials, e.g. useful Vue.js filters, how to install Google Analytics tracking code in Vue.js.