vue和react通用后台管理系统权限控制方案

在Vue和React中实现通用的后台管理系统权限控制，可以使用以下方案：

1. 使用Vue Router或React Router来控制页面级别的权限。
2. 使用自定义钩子或高阶组件来处理组件级别的权限控制。
3. 将权限信息保存在Vuex或Redux状态管理中。
4. 使用Context API或Redux等全局状态管理来集中管理权限状态。

以下是一个简单的例子，展示如何在Vue中实现基于路由的权限控制：

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from '@/store';
 
Vue.use(VueRouter);
 
const routes = [
  {
    path: '/admin/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { requiresAuth: true } // 添加meta字段标记需要权限
  },
  // 其他路由...
];
 
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});
 
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 判断用户是否已经登录
    if (!store.state.isUserLoggedIn) {
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将目标路由作为重定向参数
      });
    } else {
      next();
    }
  } else {
    next(); // 不需要权限控制的路由直接放行
  }
});
 
export default router;

在React中，权限控制可以使用React Router的PrivateRoute组件来实现：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
 
const PrivateRoute = ({ component: Component, isUserLoggedIn, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isUserLoggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to="/login" />
      )
    }
  />
);
 
const mapStateToProps = state => ({
  isUserLoggedIn: state.isUserLoggedIn
});
 
export default connect(mapStateToProps)(PrivateRoute);

在实际应用中，你需要将isUserLoggedIn状态保存在Redux store中，并在路由或组件级别使用connect高阶组件来访问这个状态。这样，你就可以根据用户的登录状态来控制对不同页面和功能的访问权限。