Vue-router routing determines that the page is not logged in and jumps to the login page

This article mainly brings you an example of how Vue-router determines that the page is not logged in and jumps to the login page. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

As shown below:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
 if (token) { // 判断当前的token是否存在
  next();
 }
 else {
  next({
  path: '/login',
  query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由
  })
 }
 }
 else {
 next();
 }
});

Before this, add a meta attribute to the route:

{
 path: '/index',
 meta: {
  title: '',
  requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
 },
}

Note: But the fact is that most of the time there is no jump when logging in. transfer, so here you need to add a section to the login jump path:

if(this.$route.query.redirect){
//  let redirect = decodeURIComponent(this.$route.query.redirect);
  let redirect = this.$route.query.redirect;
  this.$router.push(redirect);
}else{
  this.$router.push('/');
 }

Related recommendations:

Three Vue-Routers to implement jumps between components

About vue-router to implement jump parameter transfer between components

Detailed explanation of vue-router routing and navigation between pages

The above is the detailed content of Vue-router routing determines that the page is not logged in and jumps to the login page. For more information, please follow other related articles on the PHP Chinese website!