Блог

Я внедрил Firebase (он же. Платформа идентификации Google) в мой проект Vue. Я хочу защитить определенные маршруты, поэтому я добавил следующее:

 // router/index.js

    {
        path: '/profile',
        name: 'Profile',
        component: Profile,
        beforeEnter: (to, from, next) => {
            if (firebase.auth().currentUser) {
                next()
            } else {
                next({
                    path: '/login',
                })
            }
        }
    },
  

Это работает! Однако это стало бы неуправляемым, если бы я делал это для каждого маршрута.

Чтобы сделать его аккуратным, я попытался поместить его в функцию (внутри файла маршрута и попробовал извне), но это не сработает, потому что Firebase не была инициализирована во время анализа, поэтому выдает ошибку с указанием сначала инициализировать Firebase.

Firebase инициализируется в моем main.js файле:

 // main.js

// Firebase configuration
var firebaseConfig = {
  // Config details redacted
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
  

В идеале то, что мне нужно, похоже на то, что Auth0 предоставляет в примере SDK:

 // router/index.js

//...some route
beforeEnter: authGuard()
  

Тогда authGuard это было бы во внешнем файле. Этот файл будет содержать функцию, которая проверяет, аутентифицирован пользователь или нет. Затем я могу добавить его в маршруты по мере необходимости.

Используйте перед подключением каждого маршрутизатора и проверьте метаданные маршрута. Вот пример кода из одного из моих приложений

 let router = new Router({
routes: [
    {path: '*', redirect: "/"},
    {
        path: "/",
        name: 'login',
        component: Login
    },
    {
        path: "/register",
        name: 'register',
        component: Register,
    },

    {
        path: "/home",
        name: "home",
        component: Home,
        meta: {
            requiresAuth: true
            }
      }


        ]

    },

],
mode: 'history'

})

router.beforeEach((to, from, next) => {
let currentUser = firebase.auth().currentUser;
console.log("firebasedata",currentUser);
if (to.matched.some(record => record.meta.requiresAuth)) {

    if (!currentUser) {
        next({
            path: '/login',
            query: {redirect: to.fullPath}
        })
    } else {
        if(to.matched.some(record => record.name==='login')){
            next({
                path: '/home',
                query: {redirect: to.fullPath}
            })

        }
        else {
            next();
        }

    }

} else {

    next();
}

})

export default router
  

Импортируйте аутентификацию firebase из файла конфигурации firebase, проверьте, есть ли в кэше текущий аутентифицированный пользователь. есть ли тогда доступ ко всем маршрутам, если не использовать переменную «requiresAuth» для ограничения доступа

 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 amp;amp; !user) next('/')
  else if (requiresAuth amp;amp; user) next()
  else next()
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>