Javascript vue.js中的编程导航问题

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

加载应用程序时，如果用户尝试浏览其中一条受保护的路由，客户端将向服务器发送请求，询问他拥有的令牌是否允许他访问这些受保护的路由，如果回答是“是”，则用户可以自由浏览，否则我想将他重定向到登录页面

这里出现的问题是，如果请求检查会话失败（意味着未提供有效令牌），您如何从“App.vue”中看到错误将被捕获并执行

此操作。$router.push（'/login'）

，但没有成功，实际上url根本没有更改

我试图打印

路由器

对象，我注意到我试图推送的路由显示在引用对象的

历史记录.挂起

属性下

我注意到的另一件奇怪的事情是：如果我删除'index.js'文件中声明的路由路径（最后一个）中的重定向，然后通过不属于声明的路由之一的url加载应用程序，例如'/error/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'
});

...

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>

从“Vue”导入Vue；
从“axios”导入axios；
Vue.prototype.$https=axios.create({
baseURL:'http://localhost:5000',
事实上，
跨域：对
});
Vue.prototype.$checkSession=function（）{
如果（window.location.pathname！='/login'&&window.location.pathname！='/password-forget'&&window.location.pathname.split（'/'）[1]！='password reset'）{
var authToken=localStorage.authToken？localStorage.authToken:sessionStorage.authToken；
这是.https.defaults.headers.common['x-csrf-token']=authToken；
这是.https.get（'api/web/user/session'）。然后（响应=>{
如果（window.location.pathname=='/'））{
这个.$router.push（'/dipendenti/aggiungi'）；
}
}).catch（e=>{
console.log（这个$router.app）；
这是.$router.push（'/login'）；
})
}
}
...
导出默认值{
名称：“应用程序”，
已创建：函数（）{
这是。$checkSession（）；
}
};

---

所需的行为是重定向到登录页面。

我建议添加

requireauth:true

的

meta

字段，如下所述：我认为这将达到您所需的结果。我建议添加

requireauth:true的
meta
字段，如下所述：我认为这将达到你想要的结果。