Middleware Auth

A middleware to check if a user is authenticated before displaying the protected route. If the authentication fails the user is redirected to the login page.

export default function auth({ to, next, store }) {
  const loginQuery = { path: "/login", query: { redirect: to.fullPath } };

  if (!store.getters["auth/authUser"]) {
    store.dispatch("auth/getAuthUser").then(() => {
      if (!store.getters["auth/authUser"]) next(loginQuery);
      else next();
    });
  } else {
    next();
  }
}

To add this middleware to any route simply import it into your router/index.js file:

import auth from "@/middleware/auth";

Finally add the auth method as a middleware router parameter on the meta property:

{
  path: "/dashboard",
  name: "dashboard",
  meta: { middleware: [auth] },
  component: () =>
    import(/* webpackChunkName: "dashboard" */ "../views/Dashboard"),
}