Hi,
I want to know how can i redirect user to login if user not authenticate in vue 3 with Laravel as backend. I am use vue 3 as front end separately. And I use Laravel as backend.
Here is my router/index.js file
import {createRouter, createWebHistory} from "vue-router";
import Dashboard from "../views/admin/Dashboard.vue";
import Home from "../views/Home.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import Unauthorized from "../views/Unauthorized.vue";
import Users from "../views/admin/manage-user/Users.vue";
import Roles from "../views/admin/manage-user/Roles.vue";
import Permissions from "../views/admin/manage-user/Permissions.vue";
const routes = [
{
path: '/',
name: "Home",
component: Home,
meta: {
authRequired: 'false',
},
},
{
path: '/admin',
children:[
{path: 'dashboard', name: "Dashboard", component: Dashboard},
{path: 'users', name: "Users", component: Users},
{path: 'roles', name: "Roles", component: Roles},
{path: 'permissions', name: "Permissions", component: Permissions},
],
meta: {
},
},
{
path: '/login',
name: "Login",
component: Login,
meta: {
},
},
{
path: '/register',
name: "Register",
component: Register,
meta: {
},
},
{
path: '/unauthorized',
name: 'Unauthorized',
component: Unauthorized,
meta: {
},
}
];
const router = createRouter( {
history: createWebHistory(),
routes,
});
export default router;
Here if my store/auth.js file
import {defineStore} from "pinia";
import axios from "axios";
export const useAuthStore = defineStore("auth", {
state: () => ({
authUser: null,
authErrors: [],
authStatus: null,
userRoles: null,
userPermissions: null,
}),
getters: {
user: (state) => state.authUser,
errors: (state) => state.authErrors,
status: (state) => state.authStatus,
user_roles: (state) => state.userRoles,
user_permissions: (state) => state.userPermissions,
},
actions: {
async getToken() {
await axios.get('/sanctum/csrf-cookie');
},
async getUser() {
await this.getToken();
const data = await axios.get('/api/user');
this.authUser = data.data;
this.userRoles = data.data.roles;
this.userPermissions = data.data.permissions;
},
async handleLogin (data) {
this.authErrors = [];
await this.getToken();
try {
await axios.post('/api/login',{
email: data.email,
password: data.password,
});
this.router.push('/admin/dashboard');
} catch (error) {
if (error.response.status === 422){
this.authErrors = error.response.data.errors;
}
}
},
async handleRegister (data) {
this.authErrors = [];
await this.getToken();
try {
await axios.post('/api/register', {
name: data.name,
email: data.email,
password: data.password,
password_confirmation: data.password_confirmation,
});
this.router.push("/");
} catch (error) {
if (error.response.status === 422){
this.authErrors = error.response.data.errors;
}
}
},
async handleLogout () {
await axios.post('logout');
this.authUser = null;
this.router.push('/login');
},
async handleForgotPassword(email) {
this.authErrors = [];
await this.getToken();
try {
const response = await axios.post('forgot-password', {
email: email,
});
this.authStatus = response.data.status;
} catch (error) {
if (error.response.status === 422){
this.authErrors = error.response.data.errors;
}
}
},
async handleResetPassword(resetData) {
this.authErrors = [];
try {
const response = await axios.post('reset-password', resetData);
this.authStatus = response.data.status;
} catch (error) {
if (error.response.status === 422){
this.authErrors = error.response.data.errors;
}
}
},
},
});
Anyone have any idea?