Vue3 - 使用 beforeRouteEnter 来防止内容闪烁

Question

我正在使用带有 axios 的 Vue

[...]
import VueAxios from "vue-axios";
import axios from "@/axios";


createApp(App)
  .use(store)
  .use(router)
  .use(VueAxios, axios)
  .mount("#app");
[...]

这在全球范围内都非常有效，就像 this.axios... 在任何地方一样。我还使用 Passport 进行身份验证，在我的受保护路由中，我想调用我的 Express 端点 .../api/is-authenticated 来检查用户是否已登录。

为了完成这项工作，我想使用 beforeRouteEnter-navigation guard，但不幸的是我不能在那里调用它。

现在我在安装挂钩中，感觉不对。有什么解决方案可以让我的代码保持简洁明了吗？

非常感谢您的提示。谢谢

编辑：这对我有用。

beforeRouteEnter(to, from, next) {
    next((vm) => {
      var self = vm;

      self
        .axios({ method: "get", url: "authenticate" })
        .then() //nothing needed here to continue?
        .catch((error) => {
          switch (error.response.status) {
            case 401: {
              return { name: "Authentification" }; //redirect
              //break;
            }

            default: {
              return false; //abort navigation
              //break;
            }
          }
        });
    });

Answer 1

使用 beforeRouteEnter 可以通过将回调传递给 next 来访问组件实例。因此，不要使用 this.axios，而是使用以下内容：

beforeRouteEnter (to, from, next) {
  next(vm => {
    console.log(vm.axios);    // `vm` is the instance
  })
}

这是一个带有异步请求的伪示例。我更喜欢 async/await 语法，但这将使发生的事情更清楚：

beforeRouteEnter(to, from, next) {
  const url = 'https://jsonplaceholder.typicode.com/posts';
  // ✅ Routing has not changed at all yet, still looking at last view
  axios.get(url).then(res => {
    // ✅ async request complete, still haven't changed views
    // Now test the result in some way
    if (res.data.length > 10) {  
      // Passed the test.  Carry on with routing
      next(vm => {
        vm.myData = res.data; // Setting a property before the component loads
      })
    } else {
      // Didn't like the result, redirect
      next('/')
    }
  })
}

Vue3 - 使用 beforeRouteEnter 来防止内容闪烁

Vue3 - Using beforeRouteEnter to prevent flashing content

vue.js

axios

vue-component

passport.js

vue-router