VUE js How hide routes by role in vue-router? Spa Laravel Vue

Question

I am writing a SPA application (laravel + vue). There was a question how to hide routes in vue-router before authorization of a user with a certain role.

Now there is such a router.js fight with routes.

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Calendar.vue'
import PermissionList from '../components/PermissionList.vue'
import BoardsList from '../components/BoardsList.vue'
import UsersList from '../components/UsersList.vue'
import Login from '../components/Login.vue'

const routes = [{
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/permission-list',
        name: 'PermissionList',
        component: PermissionList
    },
    {
        path: '/boards-list',
        name: 'BoardsList',
        component: BoardsList
    },
    {
        path: '/users-list',
        name: 'UsersList',
        component: UsersList
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/dsad',
        name: 'asd',
        component: Login
    },
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
    linkActiveClass: "active",
})

router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token');
    if (!token) {
        if (to.name == 'Login') {
            next();
        } else {
            next({
                name: 'Login'
            });
        }
    } else {
        if (to.name == 'Login') {
            next({
                name: 'Home'
            });
        } else {
            next();
        }
    }


})

export default router

User data including his role and jwt token come after authorization and are stored in localstorage.

<template>
  <main class="form-signin text-center">
    <div>
      
      <h1 class="h3 mb-3 fw-normal">Form</h1>

      <div class="form-floating">
        <input
          type="text"
          class="form-control"
          placeholder="Login"
          v-model="login" 
        />
        <label for="floatingInput">Login</label>
      </div>
      <div class="form-floating my-2">
        <input
          type="password"
          class="form-control"
          placeholder="Pass"
          v-model="password"
        />
        <label for="floatingPassword">Pass</label>
      </div>

     
      <a class="w-100 btn btn-lg btn-primary" @click="logIn()">
        Login
      </a>
    </div>
  </main>
</template>

<script>
export default {
  name:'Login',
  data() {
    return {
      login:"",
      password:"",
    };
  },
  methods: {
    logIn() {
        this.HTTP.get('/sanctum/csrf-cookie').then(response => {
            this.HTTP.post("/login",{
                email:this.login,
                password:this.password,
            })
            .then((response) => {
                localStorage.setItem('token',response.config.headers['X-XSRF-TOKEN']);
                localStorage.setItem('user',JSON.stringify(response.data.user));
                this.$emit('loginUpdate');
                this.$router.push('/');
            })
            .catch((error) => {
                console.log(error);
            });
        });
        
    },
  },
  
};
</script>

<style>


.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}



</style>

if you go to the vue developer panel, all routes will be visible even before the user is authorized, how can I hide them so that unauthorized users do not see the site structure.

did you solve this problem?

Answer 1

Just use separated js file using your mixin laravel config. One login.js, another app.js and then use each of them in separated view-laravel