javascript - vue.js 中的程序化导航问题

Question

我正在开发一个 Vue.js 应用程序，但有一些关于编程导航的东西我不知道。正如您在下面的 index.js 文件中看到的那样，我的客户端中有一个树状结构的路由，其中​​一些路由需要受到保护。必须保护的路由是“仪表板”的子路由。

当应用程序加载时，如果用户尝试导航这些受保护的路线之一，客户端会向服务器发送一个请求，询问他拥有的令牌是否允许他访问这些受保护的路线，如果答案是肯定的，那么用户可以自由导航，否则我想将他重定向到登录页面。

问题出现在这里，如果请求 checkSession 失败（意味着没有提供有效令牌），如何从“App.vue”中看到错误将被捕获并this.$router.push('/login')执行，但没有成功，实际上 url 没有改变一点也不。

我尝试打印该router对象，我注意到我尝试推送的路线出现在history.pending引用对象的属性下。

我注意到的另一件奇怪的事情：如果我删除了在“index.js”文件中声明的路由路径（最后一个）中的重定向，并且我通过一个不属于声明的 URL 加载应用程序路由，例如'/wrong/path'，并且用户没有提供有效的令牌然后$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'
});

...

应用程序.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>

期望的行为是重定向到登录页面。

标签： javascriptvue.jsfrontendrouter