Breaking News: Grepper is joining You.com. Read the official announcement!

protect vue routes with firebase

Rukkiecodes answered on December 30, 2022 Popularity 1/10 Helpfulness 8/10

answer protect vue routes with firebase

protect vue routes with firebase

Comment

import { auth } from '../plugins/firebase.js' //import auth from firebase config file

const routes = [
  {
    path: '/',
    component: () => import('@/layouts/default/Default.vue'),
    children: [
      {
        path: '',
        name: 'login',
        component: () => import('@/views/auth/Login.vue'),
      },
      {
        path: '/register',
        name: 'register',
        component: () => import('@/views/auth/Register.vue'),
      },
      {
        path: '/forgotPassword',
        name: 'forgotPassword',
        component: () => import('@/views/auth/ForgotPassword.vue'),
      },
      {
        path: '/app',
        name: 'app',
        component: () => import('@/views/app/Dashboard.vue'),
        meta: {
          requiresAuth: true // the route you want to protect
        },
      },
    ],
  },
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

//Protection code
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some(x => x.meta.requiresAuth)
  const user = auth.currentUser

  if (requiresAuth && !user) next('/')
  else if (requiresAuth && user) next()
  else next()
})

Popularity 1/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: firebase javascript routes

Link to this answer
Share Copy Link

Contributed on Dec 30 2022

Rukkiecodes

0 Answers Avg Quality 2/10

protect vue routes with firebase

Contents

More Related Answers

protect vue routes with firebase

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.