Vue：根据页面类型在注销时重定向用户

Question

如果用户未通过身份验证，我使用导航守卫不允许用户访问管理页面。

router.beforeEach(function(to, from, next){
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next({name: 'site-login'});
  }
  else {
    next()
  }
});

requiresAuth 用作管理页面上的元数据，isAuthenticated ia getter 用于检查用户状态的商店 (Vuex)。

当用户单击“注销”按钮时，我想检查用户所在的位置。如果它打开并且管理页面重定向到 / 如果它在普通页面上，只需重新加载当前页面。

我想使用与上面类似的东西。

 <button @click="logout">Logout</button>

 methods: {
      logout() {
        this.$store.dispatch('logout');
      }
    }

Answer 1

为 logout 创建一个特殊路由，并从那里调度 logout 操作：

{
  path: '/logout',
  name: 'logout',
  beforeEnter (to, from, next) {
    store.dispatch('logout').then(() => {
    if (from.meta.requiresAuth) {
        return next('/');
    }
      location.reload();
    }
  }
},

通过将用户重定向到此页面注销：

<button>
  <router-link to="/logout">Logout</router-link>
</button>

Vue：根据页面类型在注销时重定向用户

Vue: Redirect an user on logout depeding on which type of page it is

vue.js

vue-router

vuex