Question

我正在尝试使用beforeEnter保护一条路线。我的路线看起来像这样；

      path: '/account',
      name: 'account',
      component: Account,
      beforeEnter:

            (to, from, next) => {

            const authService = getInstance();

            const fn = () => {
              // If the user is authenticated, continue
              if (authService.isAuthenticated) {
                console.log('no')
                return next();
              }

              // Otherwise, log in
              console.log('should login')
              authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
            };


            if (!authService.loading) {
              return fn();
            }


            authService.$watch("loading", loading => {
              if (loading === false) {
                return fn();
              }
            })
          }

    },

此功能可以按我期望的那样运行，但是我不认为该逻辑应包含在路由文件中，因此我将其存储在auth文件夹下的另一个文件中就足够了。像这样；

    import { getInstance } from "./index";

    export const authGuard = (to, from, next) => {
    console.log('test')
    const authService = getInstance();

    const fn = () => {
        // If the user is authenticated, continue with the route
        if (authService.isAuthenticated) {
            console.log('no')
            return next();
        }

        // Otherwise, log in
        console.log('should login')
        authService.loginWithRedirect({ appState: { targetUrl: to.fullPath } });
    };

    // If loading has already finished, check our auth state using `fn()`
    if (!authService.loading) {
        return fn();
    }

    // Watch for the loading property to change before we check isAuthenticated
    authService.$watch("loading", loading => {
        if (loading === false) {
            return fn();
        }
    });
    };

但是，当我将其导入到路线并执行操作时

    import { authGaurd } from './auth/authGaurd'

      Vue.use(Router)

      export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        {
          path: '/account',
          name: 'account',
          component: Account,
          beforeEnter: authGaurd
        },

这不再有效吗？我确定我一定缺少简单的东西吗？任何帮助将不胜感激。

Answer 1

尝试：

- beforeEnter: authGaurd
+ beforeEnter(to, from, next) {
    authGaurd(to, from, next)
  }

Vue-Router beforeEnter不能按预期运行吗？

1 个答案: