I'm looking to include a forgotten password option on my login page,
but I'm facing an issue when trying to navigate to it after updating the code.
The website is throwing the following error message：
- [vue-router] uncaught error during route navigation
- Uncaught (in promise) undefined
- Maximum call stack size exceeded
Here's my old code snippet:
router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem("token") == "ImLogin";
var role = localStorage.getItem('roles');
if (isLogin) {
if (to.matched.every(item => item.meta.indexOf(role) > -1)) {
next();
} else {
next('/tips');
}
} else {
if (to.path !== "/login") next("/login");
else next();
}
});
And here's the new code snippet I've added for the forgotten password feature:
<v-btn
class="font-weight-bold"
style="color:#FF7D52"
href
@click.prevent="forgetPassword"
text
>forgetPassword
</v-btn>
forgetPassword() {
this.$router.push("/forgetPassword");
},
Updated router.beforeEach method:router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem("token") == "ImLogin";
var role = localStorage.getItem('roles');
if (isLogin) {
if (to.matched.every(item => item.meta.indexOf(role) > -1)) {
next();
} else {
next('/tips');
}
} else {
if (to.path === "/forgetPassword") {
next("/forgetPassword");
} else {
if (to.path !== "/login") next("/login");
else next();
}
}
});