Vue项目中动态路由与权限控制：router.beforeEach的使用及无token重定向登录页

在现代前端项目中，权限控制是一个非常重要的环节。Vue Router作为Vue官方的路由管理器，为我们提供了强大的路由管理功能。在本文中，我们将探讨如何在Vue项目中使用router.beforeEach钩子函数来实现动态路由权限控制，并在用户未登录时自动重定向到登录页。

步骤一：登录并获取Token

首先，确保用户登录成功后，能够获取到token，并将token存储在Vuex或localStorage中。

// 假设登录方法
methods: {
  async login() {
    const response = await this.$http.post('/api/login', this.loginForm);
    const { token } = response.data;
    // 存储token
    this.$store.commit('setToken', token);
    // 获取权限路由并动态添加
    this.getPermissionRoutes(token);
    // 登录成功后重定向到首页或其他页面
    this.$router.push({ path: this.$route.query.redirect || '/' });
  }
}

步骤二：请求后端权限路由接口

在登录方法中，或者在router.beforeEach中，如果检测到用户已经登录但没有添加权限路由，则请求后端接口获取权限路由。

// 假设的获取权限路由方法
async getPermissionRoutes(token) {
  const response = await this.$http.get('/api/permission_routes', {
    headers: {
      Authorization: `Bearer ${token}`
    }
  });
  const permissionRoutes = response.data.routes;
  // 动态添加路由
  this.addRoutes(permissionRoutes);
}

步骤三：动态添加路由

将后端返回的路由数据动态添加到路由配置中。

// 动态添加路由的方法
addRoutes(routes) {
  routes.forEach(route => {
    // 使用router.addRoute方法添加单个路由
    this.$router.addRoute(route);
  });
}

注意如果你使用的是vue2,那么你可能需要使用this.$rouer.addRoutes() 

步骤四：修改router.beforeEach

在router.beforeEach中，我们需要检查是否已经添加了权限路由，如果没有，则调用获取权限路由的方法。

router.beforeEach((to, from, next) => {
  // 判断是否需要登录权限
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查token是否存在
    const token = store.getters.token;
    if (token) {
      // 检查是否已经添加了权限路由
      if (!store.getters.isPermissionRoutesAdded) {
        // 获取权限路由并动态添加
        store.dispatch('getPermissionRoutes', token).then(() => {
          // 设置状态，表示权限路由已添加
          store.commit('setPermissionRoutesAdded', true);
          // 继续路由跳转
          next({ ...to, replace: true });
        }).catch(() => {
          // 获取权限路由失败，可以重定向到登录页或其他错误处理
          next('/login');
        });
      } else {
        next();
      }
    } else {
      // 没有token，重定向到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    }
  } else {
    next();
  }
});

步骤五：在Vuex中管理状态

在Vuex中，我们需要管理权限路由是否已经添加的状态。

// Vuex store
const store = new Vuex.Store({
  state: {
    token: null,
    isPermissionRoutesAdded: false
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setPermissionRoutesAdded(state, value) {
      state.isPermissionRoutesAdded = value;
    }
  },
  actions: {
    getPermissionRoutes({ commit, state }) {
      // 调用上面的getPermissionRoutes方法
    }
  },
  getters: {
    token: state => state.token,
    isPermissionRoutesAdded: state => state.isPermissionRoutesAdded
  }
});

通过以上步骤，我们就可以在Vue项目中实现由后端动态提供权限路由，并在用户没有token时重定向到登录页的功能。