Не стандартный роутер на vue, как решить проблему плавного перехода?

Question

[2556180237]

Представляю вам странную конструкцию с которой столкнулся недавно на проекте. Это main.js(vue)

import Home from './pages/Home.vue'

Vue.use(Router)
Vue.use(VueAxios, axios)
Vue.use(VueResource)
Vue.use(iView)
Vue.use(VueCookie)
Vue.use(Vuetify)

var components = [
{
    name:'NotFoundComponent',
    component: NotFoundComponent
},
{
    name:'Home',
    component:Home
},
{
    name:'Login',
    component: Login,
  }
]

const router = new Router({
  routes: (function (){
    var xmlRequest = (function(){
      var arr = [];
      var r = []
      $.ajax({
        url: 'http://localhost:8032/api/site/router/list',
        data: cookie,
        method: 'POST',
        async: false,
        success: function(response){
          //console.log(response);
          arr = response
          //console.log(arr)
          for(var i=0; i<arr.length; i++)
          {
            //console.log(arr[i][0]['name'])
            for(var j = 0; j < components.length; j++)
            {
              if(components[j]['name'] == arr[i][0]['name'])
              {
                object = {
                  "path": arr[i][0]['path'],
                  "name": arr[i][0]['name'],
                  "component": components[j]['component'],
                }
                r.push(object)
                break;
              }
            }
          }
        }
      })
      return r;
    })()
    //console.log(xmlRequest)
    var pusha = {
      "path": '*',
      "name": 'NotFoundComponent',
      "component": NotFoundComponent,
    }
    // xmlRequest.push(pusha)
    console.log(xmlRequest)
    return xmlRequest;
  })()
})

router.beforeEach((to, from, next) => {
  if (to.meta.requiredAuth) {
    if (Auth.default.user.authenticated) {
      next()
    } else {
      router.push('/home')
      // location.reload()
    }
  } else {
    next()
    // location.reload()
    // router.push('/login')
  }
})
export default router
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

Из кода видно, что роутер каждый раз подгружается через бекенд

Ответ от сервера выглядит так
Без авторизации:

[
    [
        {
            "path": "/login",
            "name": "Login",
            "component": "Login",
        }
    ]
]

С авторизацией:

[
    [
        {
            "path": "/login",
            "name": "Login",
            "component": "Login",
        },
        {
            "path": "/home",
            "name": "Home",
            "component": "Home",
        }
    ]
]

При такой логике возникает проблемка авторизации, после того как пользователь залогинился ему нужно перезапустить сайт в ручную чтобы роутер сработал и подгрузил все оставшиеся страницы из нового ответа от апи.

Как это можно сделать на автомате, не нажимая кнопку f5 ?

Comments

[RALMAZ]

Vue.use(VueAxios, axios)
и
$.ajax({
В голос)

Answer 1

[Evgeny Kulakov]

В чем проблема сразу после авторизации перейти на нужный роут?

Answer 2

[amokrushin]

Есть костыльный способ заменить маршруты роутера:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history',
  routes: []
})

const router = createRouter()

export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // the relevant part
}

export default router

https://github.com/vuejs/vue-router/issues/1234#is...