Как редиректить если поменялось значение переменной (vue-router)?

Question

[stanislavkm]

Может поменяться значение права на доступ к странице в любой момент. Если права нет, и пользователь находится на этой странице, то нужно перебросить на главную. Может как-то можно сделать в настройках путей? Пока только идея отслеживать в компоненте и там же редиректить.

Answer 1

[Николай]

Тут либо тебе поможет Watch, либо guard в РОутере

1-

<script setup>
import { useRouter } from 'vue-router';
import { computed, watch } from 'vue';
import { useAuthStore } from '@/stores/auth'; // Пример с Pinia

const router = useRouter();
const authStore = useAuthStore();
const userRole = computed(() => authStore.role);

watch(userRole, (newRole) => {
    if (newRole !== 'admin') {
        router.push('/'); 
    }
});
</script>

Тут проверка, перед переходом

router.beforeEach((to, from, next) => {
    const hasAccess = checkUserAccess(to); 
    if (!hasAccess) {
        next('/'); 
    } else {
        next();
    }
});