Проблема с программной навигацией в vue.js - PullRequest
Новая
       35

Проблема с программной навигацией в vue.js

1 голос
/ 16 апреля 2019

Я занимаюсь разработкой приложения Vue.js, и есть кое-что, что я не могу понять о программной навигации.Как вы можете видеть ниже в моем файле index.js, у меня есть клиент с древовидной структурой, некоторые из этих маршрутов должны быть защищены.Маршруты, которые должны быть защищены, являются дочерними для «приборной панели».

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

Здесь возникает проблема, как вы можете увидеть из «App.vue», если запрос checkSession не выполнен (имеется в видудействительный токен не был предоставлен) ошибка будет перехвачена, и this.$router.push('/login') будет выполнен, но безуспешно, фактически URL не изменяется вообще.

Я попытался напечатать объект router, и язаметил, что маршрут, который я пытаюсь пройти, появляется в свойствах history.pending цитируемого объекта. enter image description here

Еще одна странная вещь, которую я заметил: если я удалюредирект в пути маршрутов (самый последний), объявленный в файле index.js, и я загружаю приложение через URL, который не принадлежит ни одному из объявленных маршрутов, напримерЕсли «/ неправильно / путь», и пользователь не предоставит действительный токен, то $router.push('/login') будет работать нормально.

index.js 

...

const routes = [{
    path: '/login',
    name: 'login',
    component: LoginComponent
  },
  {
    path: '/',
    name: 'dashboard',
    redirect : '/dipendenti/aggiungi',
    component: DashboardComponent,
    children: [
      { path: 'dipendenti', component: MiddleWareComponent, children:[
        { path: 'aggiungi', component: AddWorkerComponent },
        { path: 'elimina', component: DeleteWorkerComponent },
        { path: 'modifica', component: ModifyWorkerComponent }
      ]},
      { path: 'clienti', component: MiddleWareComponent, children:[
        { path: 'aggiungi', component: AddClientComponent },
        { path: 'modifica', component: ModifyClientComponent }
      ]},
      { path: 'team', component: MiddleWareComponent, children:[
        { path: 'aggiungi', component: AddTeamComponent },
        { path: 'elimina', component: DeleteTeamComponent },
        { path: 'modifica', component: ModifyTeamComponent }
      ]},
      { path: 'lavori', component: MiddleWareComponent, children:[
        { path: 'visualizza', component: ViewWorkComponent },
        { path: 'aggiungi', component: AddWorkComponent },
        { path: 'elimina', component: DeleteWorkComponent },
        { path: 'modifica', component: ModifyWorkComponent }
      ]},
      { path: 'account', component: MiddleWareComponent, children:[
        { path: 'modifica', component: ModifyAccountComponent }
      ]}
    ]
  },
  { path: '/logout', component: LogoutComponent },
  { path: '/password-forgot', component: PasswordForgotComponent },
  { path: '/password-reset/:token/:api', component: PasswordResetComponent },
  { path: '/*', redirect : '/' }
];

const router = new VueRouter({
  routes: routes,
  base: __dirname,
  base: process.env.BASE_URL,
  mode: 'history'
});

...

App.vue 

<script>
import Vue from 'vue';
import axios from 'axios';


Vue.prototype.$https = axios.create({
  baseURL: 'http://localhost:5000',
  withCredentials: true,
  crossdomain: true
});

Vue.prototype.$checkSession = function() {
  if (window.location.pathname != '/login' && window.location.pathname != '/password-forgot' && window.location.pathname.split('/')[1] != 'password-reset') {
    var authToken = localStorage.authToken? localStorage.authToken:sessionStorage.authToken;
    this.$https.defaults.headers.common['x-csrf-token'] = authToken;
    this.$https.get('api/web/user/session').then(response => {
      if(window.location.pathname == '/'){
        this.$router.push('/dipendenti/aggiungi');
      }
    }).catch(e => {
      console.log(this.$router.app);
      this.$router.push('/login');
    })
  }
}

...


export default {
  name: 'app',
  created: function() {
    this.$checkSession();
  }
};
</script>

Желаемым поведением будет перенаправление на страницу входа.

...