如何根据后端响应初始化Vue应用程序？

Question

我希望在应用程序中的其他任何东西之前运行一些代码，该代码将发送一个请求到后端，然后更新商店。我需要先执行这个部分，因为线路警卫依赖它，如何实现？

代码示例

获取用户信息&设置

async init() {
    await AuthService.initCSRF();
    await AuthService.getUser().then((res) => {
      if (res.data && res.data.user) {
        this.loginLocally(res.data.user);
      } else {
        this.logoutLocally();
      }
    });
}

Auth警卫

export function isLoggedIn(to, from, next) {
  console.log('Checked', store.state.auth.isLoggedIn);
  if (store.state.auth.isLoggedIn) {
    next();
    return;
  }

  next({ name: 'login' })
}

Answer 1

在我以前的项目中，我做了这样的事情。希望你能有一些想法。

app.js

import App from './components/App.vue'
store.dispatch('auth/attempt', sessionStorage.getItem('token')).then(() =>{
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App),
 });
});

这里，我正在验证保存在本地存储中的令牌，然后再呈现应用程序。

我的Vuex行为就像这样

async signIn({dispatch}, credentials) {
  let response = await axios.post("auth/signin", credentials);
  await dispatch('attempt', response.data.token)
},


async attempt({commit, state}, token) {
  if (token) {
    await commit('SET_TOKEN', token);

  }
  if (!state.token) {
    return;
  }

  try {
    let response = await axios.get('auth/me');
    commit('SET_USER', response.data)
  } catch (e) {
    commit('SET_TOKEN', null);
    commit('SET_USER', null);
  }
},
async signOut({commit}) {
  axios.post('auth/signout').then(() => {
    commit('SET_TOKEN', null);
    commit('SET_USER', null);
  });
}

我使用订阅服务器侦听更改，并在请求标头中添加或删除令牌

import store from '../store'

store.subscribe((mutation) => {

 if (mutation.type === 'auth/SET_TOKEN') {
  if (mutation.payload) {
   axios.defaults.headers.common['Authorization'] = `Bearer ${mutation.payload}`;
  sessionStorage.setItem('token', mutation.payload);
} else {
  axios.defaults.headers.common['Authorization'] = null;
  sessionStorage.removeItem('token');
  }
 }
});

最后，一个axios拦截器用于句柄令牌过期。

import router from '../plugins/router'
import store from '../store'
import axios from "axios";

axios.interceptors.response.use((response) => {

  return response;
}, (error) => {
if (error.response.status) {
  if (error.response.status === 401) {

  if (router.currentRoute.name !== 'landing') {
    store.dispatch('auth/clearToken').then(() => {
      router.replace({
        name: 'landing'
      });

    }).finally(() => {
      swal.fire(
        'Your Session is Expired',
        'Please sign in again!',
        'error'
      )
    });
    }
  }
}

return Promise.reject(error);
});

Answer 2

初始化承诺可以在调用.mount(...)之前等待。问题是Vue路由器启动与申请分开，不会以这种方式延迟。

如果取决于初始化过程的是路由器，延迟路由器启动的一种方法是等待路由器钩子中的承诺在其他路由器之前触发：

const initPromise = init();

...

router.beforeEach(async (to, from, next) => {
  await initPromise;
  next();
});