javascript - 如果用户已登录，Vue Router 不应重定向

Question

我将 Firebase 身份验证与 Vuejs 和 Vue Router 一起使用。我有主页、登录、注册和任务页面。我希望当用户登录并进入登录或注册页面时，他将被重定向到任务页面，但如果他进入主页，他不应该被重定向到任务页面。我不知道如何配置它并寻求帮助。

我有以下代码：

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/login',
        name: 'Login',
        component: Login
      },
      {
        path: '/signup',
        name: 'SignUp',
        component: SignUp
      },
      {
        path: '/tasks',
        name: 'Tasks',
        component: Tasks,
        meta: {
          requiresAuth: true
        }
      },
      { path: "*", redirect: {path: '/'} }
    ]

    const router = new VueRouter({
      mode: "history",
      routes
    });


    router.beforeEach((to, from, next) => {
      const currentUser = firebase.auth().currentUser;
      const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
      if (requiresAuth && !currentUser) next('login');
      else if (!requiresAuth && currentUser){next('tasks')}
      else next();
    });

    let app;
    firebase.auth().onAuthStateChanged(function () {
      if(!app){
        new Vue({
          router,
          render (h) {
            return h(App)
          }
        }).$mount('#app');
      }
    });

解决方案

我在 Home 路径中添加了一个元标记，并在路由器函数中添加了一个 if 子句。

解决方案代码：

    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        // I added this meta tag to the Home path.
        meta: {
          loggedin: true
        }
      },
      {
        path: '/login',
        name: 'Login',
        component: Login
      },
      {
        path: '/signup',
        name: 'SignUp',
        component: SignUp
      },
      {
        path: '/tasks',
        name: 'Tasks',
        component: Tasks,
        meta: {
          requiresAuth: true
        }
      },
      { path: "*", redirect: {path: '/'} }
    ]
    const router = new VueRouter({
      mode: "history",
      routes
    });

    router.beforeEach((to, from, next) => {
      const currentUser = firebase.auth().currentUser;
      const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
      const loggedin = to.matched.some(record => record.meta.loggedin);
      // I added the if clause under this text.
      if (loggedin && currentUser) next();
      else if (requiresAuth && !currentUser) next('login');
      else if (!requiresAuth && currentUser) next('tasks');
      else next();
    });

    let app;
    firebase.auth().onAuthStateChanged(function () {
      if(!app){
        new Vue({
          router,
          render (h) {
            return h(App)
          }
        }).$mount('#app');
      }
    });

标签： javascriptvue.jsvuejs2vue-router