Пересчет маршрутов Vue

Question

как я могу сделать VUE для повторного рендеринга маршрутов

Предположим, у меня есть файл login.vue (намеренно не добавляется содержимое шаблона, так как он не доступен)

import { auth_url, home_url} from "./../config/url.js"


export default {
    name: "login",
    data () { 
       return {
        auth_url: auth_url
       } 
    },
  created: function() {
      console.log(home_url)
    return this.$store.dispatch("GOOGLE_PROFILE",  home_url)
    }
}

Здесь

return this.$store.dispatch("GOOGLE_PROFILE",  home_url)

Отправляет действие, которое отправляется на сервер и проверяет, аутентифицирован ли пользователь или нет.Если пользователь аутентифицирован, он обновляет состояние и изменяет isAuthenticated: true в Vuex Store

Теперь у меня есть маршрут Vue, где я выполняю аутентификацию на стороне клиента

export default function (vuexStore) {
 let {store} = vuexStore

 const ifAuthenticated = (to, from, next) => {
   console.log("Inside If Authenticated", store.getters.GET_USER_AUTHENTICATION)
  if (store.getters.GET_USER_AUTHENTICATION) return next()
  else  next('/login')
 }

 const ifNotAuthenticated = (to, from, next) => {
  if (!store.getters.GET_USER_AUTHENTICATION)  return next()
  else  next('/')
}

  const Router = new VueRouter({
    mode: 'history', 
    routes : [
      {
        path: '/',
        beforeEnter: ifAuthenticated,
        component: () => {
          return  import('./../container/Index.vue')
        }
      }, 
      {
        path: '/login',
        beforeEnter: ifNotAuthenticated,
        component: () => {
         return import('./../container/logn.vue')
        }
      }
    ],
 mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

Теперь, проблема в моем login.vue до визуализации компонента, я хотел посмотреть, прошел ли пользователь аутентификацию и если да, то он был бы перенаправлен на "/"

Допустим, this.$store.dispatch("GOOGLE_PROFILE", home_url) меняет GET_USER_AUTHENTICATION на true , но я не вижу, чтобы мой компонент рендеринга был направлен на "/" , скорее он все еще говорит оmy login.vue page

Может кто-нибудь помочь мне разобраться, что я могу делать не так?

Answer 1

Насколько я понимаю, после отправки на GOOGLE_PROFILE действие, чтобы проверить, аутентифицирован ли пользователь или нет, вы можете перенаправить пользователя на /, используя router.push()

Файл вашего действия:

import router from './router' // import your router


//action
'GOOGLE_PROFILE' ({commit}, payload) {
  checkIfUserIsLogin().then(isLoggedIn => {
    if (isLoggedIn) {
      router.push('/')
    }
  })
}