Je me demande comment désactiver conditionnellement une route dans VueRouter, afin qu'elle ne soit plus accessible!
J'ai essayé de rediriger avec this.$router.replace('/')
mais l'URL a montré l'itinéraire que je voulais ignorer.
Des pensées?
MODIFIER:
c'est mon VUEX-Store: Jetez un œil à router.replace('/')
const store = new Vuex.Store({
state: {
users: [ ],
friendships: [ ],
userID: null
},
mutations: {
signUp(state, payload) {
auth.createUserWithEmailAndPassword(payload.email, payload.password).then((user) => {
if (user !== null) {
state.userID = user.uid
router.replace('/')
}
else {
state.userID = null
}
})
},
signIn(state, payload) {
auth.signInWithEmailAndPassword(payload.email, payload.password).then((user) => {
if (user !== null) {
state.userID = user.uid
router.replace('/')
}
else {
state.userID = null
}
})
},
signOut(state) {
auth.signOut()
state.userID = null
router.replace('/signin')
},
authenticate(state) {
auth.onAuthStateChanged((user) => {
if (user !== null) {
state.userID = user.uid
router.replace('/')
}
else {
state.userID = null
}
})
}
},
actions: {
signUp({ commit }) {
commit('signUp')
},
signIn({ commit }) {
commit('signIn')
},
signOut({ commit }) {
commit('signOut')
},
authenticate({ commit }) {
commit('authenticate')
},
redirect({ commit }) {
commit('redirect')
}
}
})
et voici ma composante:
<template>
<div id="you">
<h1>you</h1>
<p>You are on your secret page!</p>
<p>{{ $store.state.userID }}</p>
</div>
</template>
<script>
export default {
name: 'you',
beforeCreate() {
if (this.$store.state.userID === null) {
this.$router.replace('/signin')
}
}
}
</script>
Vous pouvez ajouter n meta feild à cette route que vous souhaitez désactiver conditionnellement comme ceci:
export const routes = [
{path: '/', component: foo},
{path: '/bar', component: bar, meta:{conditionalRoute:true}}
];
Et utilisez router.beforeEach
Dans votre main.js:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.conditionalRoute)) {
// this route requires condition to be accessed
// if not, redirect to home page.
if (!checkCondition) {
//check codition is false
next({ path: '/'})
} else {
//check codition is true
next()
}
} else {
next() // make sure to always call next()!
}
})
Ou bien utilisez beforeRouteEnter()
navigation guard localement sur le composant de cet itinéraire
beforeRouteEnter(to, from, next){
next(vm => {
// access to component instance via `vm`
if((checkCondition){
next();
}else{
next('/');
}
})
}
Dans votre composant de connexion
beforeRouteEnter(to, from, next){
next(vm => {
// access to component instance via `vm`
if((vm.$store.state.userUID !== null){
next('/');
}else{
next();
}
})
}