面试题：Vue路由动态参数传递下的导航守卫应用

实现思路

定义路由：在Vue Router中定义订单详情页的路由，并使用动态参数接收订单ID。
导航守卫：使用beforeEach导航守卫，在每次路由切换前触发，进行权限判断。
权限判断逻辑：在导航守卫中获取当前用户角色和订单所属商家信息，判断是否匹配。
处理权限不通过情况：如果权限不通过，重定向到合适的页面（如无权限提示页）。

关键代码

定义路由

import Vue from 'vue';
import Router from 'vue-router';
import OrderDetail from '@/components/OrderDetail.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/order/:orderId',
      name: 'OrderDetail',
      component: OrderDetail
    }
  ]
});

导航守卫及权限判断

import router from './router';
import store from './store'; // 假设用户角色信息在store中

router.beforeEach((to, from, next) => {
  const { orderId } = to.params;
  const userRole = store.state.user.role; // 获取用户角色
  // 假设这里通过API获取订单所属商家信息，实际应根据业务调整
  const getOrderMerchant = async (orderId) => {
    // 模拟异步获取
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('merchant1');
      }, 1000);
    });
  };
  getOrderMerchant(orderId).then((merchant) => {
    // 假设匹配逻辑是用户角色为admin或者用户角色与商家匹配
    const hasPermission = userRole === 'admin' || userRole === merchant;
    if (hasPermission) {
      next();
    } else {
      next('/noPermission'); // 重定向到无权限页面
    }
  });
});

无权限提示页组件（示例）

<template>
  <div>
    <h1>无权限访问该订单</h1>
  </div>
</template>

<script>
export default {
  name: 'NoPermission'
};
</script>

订单详情页组件（示例）

<template>
  <div>
    <h1>订单详情页 - {{ orderId }}</h1>
  </div>
</template>

<script>
export default {
  name: 'OrderDetail',
  data() {
    return {
      orderId: this.$route.params.orderId
    };
  }
};
</script>

星途面试题库

面试题：Vue路由动态参数传递下的导航守卫应用

知识考点

面试题答案

实现思路

关键代码