Authentication With Firebase and Vue router

This is very usual situation, how to make it? it’s very simple to do this;


const router = new Router({
path: "/users/dashboard",
name: "users.dashboard",
component: UserDashboard,
meta: {
// set require auth is true, should be login and access this page.
requiresAuth: true

Next, using before each to scan all routers.

router.beforeEach((to, from, next) => {
const user = firebase.auth().currentUser; //taking firebase current user via firebase api.
const requiresAuth = to.matched.some(record => record.meta.requiresAuth); //get meta requiresAuth

if (requiresAuth && ! user) { //requiresAuth is true but firebase user isn't.
next({name: 'login'});
} else if (!requiresAuth && user) { // in the other hand, no need auth.
} else { //by default.

finally, exporting router.

export default router;

Here is how to authenticate users using Vue.js and Firebase