Protecting routes

Vue Router

You can protect routes by creating a navigation guard that will inquire for the authentication status of the user.

This means you can have certain parts of your app only available for signed-in users.

info

This example uses Vue Router v4 for routing.

src/main.js

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { NhostClient } from '@nhost/vue'
import App from './App.vue'

const nhost = new NhostClient({
  subdomain: '<your-subdomain>',
  region: '<your-region>'
})

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // your custom routes
  ]
})

router.beforeEach(async (to) => {
  const authenticated = await nhost.auth.isAuthenticatedAsync()
  if (!authenticated) {
    // The `/profile` route is protected and will redirect to `/signin` if not authenticated
    if (to.path === '/profile') {
      return '/signin'
    }
  }
  return true
})

createApp(App).use(router).use(nhost).mount('#app')