How to check for authorized users?

Question

Vue.js

Good day, I'm trying to make a check whether the user has passed authorization or not.
Here is my route.js

import Vue from "vue";
import Router from "vue-router";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const router = new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "login",
      meta: {
        layout: "login"
      },
      component: () => import("../views/admin/Login.vue")
    },
    {
      path: "/panel",
      name: "panel",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/Main.vue")
    },
    {
      path: "/goods",
      name: "goods",
      a: {
        layout: "panel"
      },
      component: () => import("../views/admin/Goods.vue")
    },
    {
      path: "/goods/:id",
      name: "about-goods",
      props: true,
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/AboutGoods.vue")
    },
    {
      path: "/orders",
      name: "orders",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/Orders.vue")
    },
    {
      path: "/sales",
      name: "sales",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/Sales.vue")
    },
    {
      path: "/about-order",
      name: "about-order",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/AboutOrder.vue")
    },
    {
      path: "/admin-control",
      name: "admin-control",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/AdminControl.vue")
    },
    {
      path: "/categories",
      name: "categories",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/Categories.vue")
    },
    {
      path: "/create-goods",
      name: "create-foods",
      meta: {
        layout: "panel"
      },
      component: () => import("../views/admin/CreateGoods.vue")
    }
  ]
});

router.beforeEach((to, from, next) => {
  const currentUser = localStorage.getItem("auth");
  if (currentUser == 1) {
    next("panel");
  } else {
    next();
  }
});

export default router;

I'm trying to do validation like this (in route.js file)

router.beforeEach((to, from, next) => {
  const currentUser = localStorage.getItem("auth");
  if (currentUser == 1) {
    next("panel");
  } else {
    next();
  }
});

But I get an error

. I also have a question, how can I take data not from LocalStorage, but from Vuex

Answer 1

router.beforeEach((to, from, next) => {
  const currentUser = localStorage.getItem("auth");
  if (currentUser && to.path !== '/panel' ) {
    next("panel");
  } else {
    next();
  }
});