Question

我正在开发Vue.js应用程序，关于程序导航我有些不明白。如您在下面的index.js文件中看到的，我的客户端中有一个树形结构的路由，其中一些路由需要保护。必须保护的路由是“仪表板”子级的路由。

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

这里出现了问题，如果请求checkSession失败（意味着没有提供有效的令牌），您将如何从“ App.vue”中看到错误，将捕获错误并执行this.$router.push('/login')，但未成功，实际上该网址完全不会更改。

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

我注意到的另一件奇怪的事情：如果我删除了index.js文件中声明的路由路径（最后一个）中的重定向，并且我通过一个不属于该URL的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'
});

...

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.js中的程序化导航问题

0 个答案: