Как сделать проверку на авторизированных пользователей?

Question

[Александр Корегин]

Доброго времени суток, я пытаюсь сделать проверка прошёл ли пользователь авторизацию или нет.

Вот мой 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;

Я пытаюсь сделать проверку вот так (В файле route.js)

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

Но у меня выскакивает ошибка



У меня так же вопрос, как можно брать данные не из LocalStorage, а из Vuex

Answer 1

[Олег Колтунов]

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

Comments

[Олег Колтунов]

import $store from '../store'
const currentUser = $store.state.user

[Александр Корегин]

Олег Колтунов, спасибо большое)

[Александр Корегин]

Олег Колтунов, у меня теперь при попытке в роут авторизации, сбрасывается авторизация

[Олег Колтунов]

поконкретнее пожалуйста

[Александр Корегин]

Олег Колтунов, у меня есть route login, и кучу route`ов самой панели администратора, Так вот когда я авторизировался и пытаюсь сам перейти на route login, то у меня сбрасывается авторизация в Vuex и он позволяется мне зайти в route login. А кстати в currentUser мне прилетает только false и true

[Олег Колтунов]

Александр Корегин, Посмотрите как изменяется state в vuex, может в компоненте login вызывается функция, которая сбрасывает авторизацию. Не видя кода, сложно сказать.

[Александр Корегин]

Олег Колтунов, если коротко мне когда я собрал данные из Vuex. Мне нужно проверять если пользователь авторизирован (state.auth == true) то перекидывать в route /panel, а если не авторизирован (state.auth == false) перекидывало на страницу авторизации

[Александр Корегин]

Олег Колтунов,

это Login

<script>
import axios from "axios";

export default {
  name: "login",
  metaInfo: {
    title: "Авторизация"
  },
  data: () => ({
    textModal: "",
    openModal: false,
    email: "",
    password: "",
    error: []
  }),
  methods: {
    async submitHandler() {
      if (this.email != "" && this.password != "") {
        axios
          .post("http://tea-shop.ru/api/login", {
            email: this.email,
            password: this.password
          })
          .then(response => {
            if (response.data["status"] == "error") {
              this.textModal =
                "Ошибка! Электронная почта или пароль не правильно указаны";
              this.openModal = true;
              setTimeout(() => (this.openModal = false), 2000);
            }
            if (response.data["api_token"]) {
              this.$store.dispatch("login", response.data["api_token"]);
              this.$router.push("panel");
            }
          });
      } else {
        this.textModal = "Заполните все данные!";
        this.openModal = true;
        setTimeout(() => (this.openModal = false), 2000);
      }
    }
  }
};
</script>

[Олег Колтунов]

Александр Корегин, попробуйте так

router.beforeEach((to, from, next) => {
  const authUser = $store.state.auth
  const publicPages = ['/login']
  const authRequired = !publicPages.includes(to.path)

  if (authRequired && !authUser) {
    next('/login')
  }
  if (to.path === '/login' && authUser) {
    return next('/panel')
  }
  next()
});

[Александр Корегин]

Олег Колтунов, это капец, он всё равно разрешает заходить, если пользователь авторизирован и в обратном порядке

[Александр Корегин]

Олег Колтунов, https://gitlab.com/thisall/tea-shop/ вот можете посмотреть

[Александр Корегин]

Олег Колтунов, я разобрался с ошибкой, код рабочий у меня просто при перехода на другой route, данные из Vuex стираются.