How to check for authorized users?

Good day, I'm trying to do check if the user was already login or not.

Here is my route.js

import from Vue "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 a check like this (In the file route.js)

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


But I get an error

5df2371adc027044281313.png

I have the same question, how to take the data from LocalStorage, and from Vuex
April 3rd 20 at 17:39
1 answer
April 3rd 20 at 17:41
Solution
router.beforeEach((to, from, next) => {
 const currentUser = localStorage.getItem("auth");
 if (currentUser && to.path !== '/panel' ) {
next("panel");
 } else {
next();
}
});
import $store from '../store'
const currentUser = $store.state.user - zachery47 commented on April 3rd 20 at 17:44
@zachery47, thank you very much) - Alverta_Grady commented on April 3rd 20 at 17:47
@zachery47, I have now while trying to route an authorization reset authorization - Alverta_Grady commented on April 3rd 20 at 17:50
please be more specific - zachery47 commented on April 3rd 20 at 17:53
@zachery47, I have a login route, and a bunch of route's the admin panel, So when I logged on and trying to go to the login route, then I reset authorization in Vuex and he allowed me to go to the login route. And by the way I got hit in the currentUser only false and true - Alverta_Grady commented on April 3rd 20 at 17:56
@Alverta_Grady, let's See how changes in state vuex, maybe in component login function is called, which resets the authorization. Without seeing code, hard to say. - zachery47 commented on April 3rd 20 at 17:59
@zachery47, if briefly when I collected data from Vuex. I need to check if the user is logged in (authorized state.auth == true) then throw in the route /panel, and if not authorized (state.auth == false) bounced to the login page - Alverta_Grady commented on April 3rd 20 at 18:02
@zachery47,

it Login

the <script>
import from axios "axios";

export default {
 name: "login",
 metaInfo: {
 title: "Authorization"
},
 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 =
 "Error! Email or password is not correct";
 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 = "Fill in all data!";
 this.openModal = true;
 setTimeout(() => (this.openModal = false), 2000);
}
}
}
};
</script>
- Alverta_Grady commented on April 3rd 20 at 18:05
@Alverta_Gradytry it
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()
});
- zachery47 commented on April 3rd 20 at 18:08
@zachery47, that's fucked up, he's still allowed to enter if the user is authorized and in reverse order - Alverta_Grady commented on April 3rd 20 at 18:11
@zachery47, https://gitlab.com/thisall/tea-shop/ here can watch - Alverta_Grady commented on April 3rd 20 at 18:14
@zachery47, I figured out the error code and I just when the transition to another route, data from Vuex erased. - Alverta_Grady commented on April 3rd 20 at 18:17

Find more questions by tags Vue.js