Блог

После входа пользователя в систему я не хочу, чтобы пользователь получал доступ к странице входа в систему. Я пробовал это ниже, но, похоже, это не работает. Что я должен сделать, чтобы это работало?

[Обновлено]

Когда я console.log(store.getters.loggedIn внутри else if оператора, он возвращает false, поэтому я думаю, что проблема, возможно, в store.getters этом. Поскольку я новичок в Vuejs, я действительно не уверен, как это исправить. Я добавлю свой код vuex ниже. Надеюсь, я смогу получить некоторую помощь.

Заранее спасибо!

 // vuex
export default new Vuex.Store({
  state: {
    accessToken: null,
    refreshToken: null,
    APIData: "",
  },
  mutations: {
    updateStorage(state, { access, refresh }) {
      state.accessToken = access;
      state.refreshToken = refresh;
    },
    destroyToken(state) {
      state.accessToken = null;
      state.refreshToken = null;
    },
  },
  getters: {
    loggedIn(state) {
      return state.accessToken != null;
    },
  },
  actions: {
    userLogout(context) {
      console.log("hello");
      if (context.getters.loggedIn) {
        context.commit("destroyToken");
      }
    },
    userLogin(context, usercredentials) {
      return new Promise((resolve, reject) => {
        getAPI
          .post("/rest-api-token/", {
            email: usercredentials.email,
            password: usercredentials.password,
          })
          .then((response) => {
            context.commit("updateStorage", {
              access: response.data.access,
              refresh: response.data.refresh,
            });
            resolve();
            console.log(this.getters.loggedIn); <-- return true
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
  modules: {},
});

// main.js
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresLogin)) {
    if (!store.getters.loggedIn) {
      next({ name: "login" });
    } 
    else {
      next();
    }
  } 
  // if user is logged in and go to log in page redirect them to home page
  else if (to.matched.some(record => record.meta.requiresVisitor)) {
    if (store.getters.loggedIn) {
      next({ name: 'home'});
    }
    else {
      next();
    }
  }
  // 
  else {
    next();
  }
});

//index.js (router)
const routes = [
  {
    path: "/",
    name: "login",
    component: Login,
    meta: {
      requiresVisitor: true,
    },
  },
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      requiresLogin: true,
    },
  },
  {
    path: "/logout",
    name: "logout",
    component: Logout,
  },
];
  

я бы добавил состояние в свой магазин под названием:

 state: {
    accessToken: null,
    refreshToken: null,
    APIData: "",
    loggedIn: false //<<<<<<<<<<<<<<<<<<<<< HERE
  },
  

тогда я бы добавил мутацию для процесса входа в систему, если пользователь успешно вошел в систему

 mutations: {
    updateStorage(state, { access, refresh }) {
      state.accessToken = access;
      state.refreshToken = refresh;
    },
    destroyToken(state) {
      state.accessToken = null;
      state.refreshToken = null;
    },
    loginAttempt(state, payload) { //<<<<<<<<<<<<<<HERE
      state.loggedIn = payload
    }

  },

  

и переключите состояние входа в систему на true в случае успеха или false в случае неудачи.

затем я добавляю v-if=»userIsLoggedIn» в ваш компонент входа и переключаю логин, если пользователь не вошел в систему, и показываю компонент входа или скрываю его

конечно userIsLoggedIn , должно быть вычисленное:

 computed: {
  userIsLoggedIn: function() {
    return this.$store.state.loggedIn
  }
}