Vue.js 检查登录状态，如果未登录则呈现覆盖，如果登录成功则继续

我将Vuejs与Vuetify和Vuex一起使用，希望创建一个简单的应用程序。比如说一个非常小的待办事项应用程序。对于我的后端，我使用Express REST api，对于HTTP方法，我使用Axios

为了处理这次会议，我读了两件事：

启动Axios调用时，可能会出现状态代码为

401

的错误。我可以使用axios.interceptors.response处理它

  instance.interceptors.response.use(res => res, (err) => {
    if (err.response.status === 401) {
      store.dispatch('authentication/destroySession');
    }

    return err;
  });

当重定向到另一条路由时，我可以使用

Vue路由器的
beforeRouteEnter
事件，检查令牌是否有效且未过期

router.beforeEach((to, from, next) => {
  const userIsLoggedIn = checkIfUserIsLoggedIn();

  if (!userIsLoggedIn) {
    next(false); // stay on this route
  } else {
    next(); // navigate to the next route
  }
});

到目前为止还不错。但是，如果其中一种方法必须处理“未登录”状态，会发生什么情况？我不想将用户重定向到登录页面，因为这样他就会失去当前的工作。也许他没有账户，所以他需要先注册

如果路由或REST端点受到保护，我将取消要执行的任务，显示错误警报，然后我将渲染覆盖

大多数参考资料解释了如果未登录，如何重定向到登录页面，但Github会在登录后呈现登录页面并执行任务

如何渲染此覆盖？有可能吗？有更好的方法吗

创建覆盖HTML（可以在您提到的
App.vue
中），其可见性取决于名为
showOverlay
的计算结果：

<div v-show="showOverlay">OVERLAY CONTENT</div>


回到
App.vue
，将此Vuex状态映射到
showOverlay
计算：

import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['showOverlay'])
  }
}


无论在何处使用
beforeRouteEnter
，或在路由器中使用
beforeach
，都直接导入Vuex存储（这样，当
this.$store
不可访问时，可以轻松访问存储）：


我看到您发布了示例代码，该代码使用了
beforeach
而不是
beforeRouteEnter
，因此请使用类似以下内容：

router.beforeEach((to, from, next) => {
  const userIsLoggedIn = checkIfUserIsLoggedIn();

  if (!userIsLoggedIn) {
    store.state.showOverlay = true;
    next(false); // stay on this route
  } else {
    next(); // navigate to the next route
  }
});


完成此操作后，最好将覆盖移动到组件中，以避免不必要地编辑
App.vue
。在关闭时，您需要将覆盖的状态设置回
false
 在BeforeRouteCenter中，您可以调用
next（false）
中止导航，然后设置一些状态，以反应性地触发overlay@Dan是的，但我唯一的问题是如何在不删除当前视图的情况下显示覆盖图：）这会发生在我的
App.vue
中，但我不知道如何设置这样的覆盖图。我已经发布了一个答案，向您展示这似乎使用了不同的有效方法。如果用户未登录，则显示登录组件。但你提到不想重定向到这样的页面，并问如何使用覆盖：）谢谢，但我想我没有明白你的第一点。有什么区别？那么，您将如何管理此覆盖？不使用if语句？我想我不理解你的解决方案，因为我认为我的方法是你的……区别在于：在你最初的问题中，你想象一个用户在一条不受保护的路由上工作，然后尝试一些需要登录的操作。在您的第二个示例中，如果用户未登录，应用程序根目录将不显示任何内容，因此您设想的工作首先是不可能的。您的原始问题甚至不需要在发送前
，因为您可以在用户单击
Save
或任何需要登录的操作时显示覆盖。我认为您有几种设计模式混淆。根据我们的评论，我认为您真正想要的是在发送Axios请求之前显示登录覆盖，如果用户未登录。
import store from '@/store.js';

router.beforeEach((to, from, next) => {
  const userIsLoggedIn = checkIfUserIsLoggedIn();

  if (!userIsLoggedIn) {
    store.state.showOverlay = true;
    next(false); // stay on this route
  } else {
    next(); // navigate to the next route
  }
});