Question

我正在创建简单的应用程序，允许登录，恢复密码以及记录用户的一些其他操作。

我也在使用Vue-Router。我想创建3种不同类型的路线：

仅允许已登录用户（例如：更改密码）
仅允许未记录的用户（例如：恢复密码）
允许所有人（例如：主页）

我有两个函数在所有路径之前调用

router.beforeEach(Authentication.OnlyLoggedAllowed)
router.beforeEach(Authentication.OnlyNotLoggedAllowed)

如果可能的话，我也想登录用户（AJAX调用API）。要使用它，我尝试添加代码 BEFORE route.beforeEach(...)

import Vue from "vue"
import VueRouter from "vue-router"
import VueResource from "vue-resource"

...

Authentication.TryLogin.bind(Vue)();

...

router.beforeEach(Authentication.OnlyLoggedAllowed)
router.beforeEach(Authentication.OnlyNotLoggedAllowed)

new Vue({
    router
}).$mount("div#application")

将函数TryLogin()添加到router.beforeEach(..)是否很愚蠢？每次页面更改后的AJAX调用都不是很聪明。

但我有问题，因为this.$http函数中的TryLogin()会返回undefined。

或者，如果没有别的办法，我可能应该使用原始AJAX调用。

毕竟我会使这个呼叫同步。

Answer 1

使用jQuery（例如，对于ajax调用）没有任何耻辱。

如果您有一个全局存储（在此使用vuex），您可以在第一个TryLogin之后将布尔值设置为true，因此在进一步路由更改后不会多次调用它。这样的事情：

import Vue from 'vue';
import Router from 'vue-router';
import store from './store';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/profile',
      component: Profile,
      meta: {loggedIn: true}
    },
    {
      path: '/signup',
      component: Signup,
      meta: {loggedOut: true},
    }
  ],
});

router.beforeEach(async (to, from, next) => {
  if (!store.state.userLoaded) {
    await $.get('/api/account').then(
      // Gets the user (or null) from the server, and
      // set userLoaded to true in any case
      user => store.commit('updateUser', user),
      err => console.error(err)
    }
  }

  // Check if the user needs to be logged in
  if (to.meta.loggedIn && !store.state.user) {
    return next ({path: '/login', query: {redirectTo: to.fullPath}});
    // Check if the user needs to be logged out
  } else if (to.meta.loggedOut && store.state.user) {
    return next ({path: '/'});
  }
  // We can proceeed
  next();
}

export default router;

无论用户是否实际登录，store.commit('updateUser', user)都会将userLoaded设置为true。

以下是使用的vuex商店的示例：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    userLoaded: false
  },
  mutations: {
    updateUser: (state, user) => {
      state.user = user;
      state.userLoaded = true;
    }
  }
});

主vue文件：

import router from './router';
import store from './store';

new Vue({
    router,
    store
}).$mount("div#application")

Vue.js在应用程序启动之前使用Vue-Router AJAX调用

1 个答案: