前端通过用户权限来显示对应权限的页面

前端框架通用思路
- 获取权限信息 ：用户登录成功后，后端返回用户权限相关数据，如角色（role）、权限列表（permissions）等。前端将这些信息存储在合适的地方，如 Vuex（Vue）、Redux（React）或浏览器本地存储（localStorage 或 sessionStorage）。
- 路由控制：根据用户权限控制哪些路由（页面）可访问，隐藏或禁止访问无权限的页面。
- 组件渲染：在组件内部，根据权限决定某些元素（如按钮、菜单等）是否显示。

Vue 框架示例

获取和存储权限信息 ：假设使用 Vuex 存储权限信息。

javascript

复制代码

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userRole: null,
    userPermissions: []
  },
  mutations: {
    setUserRole(state, role) {
      state.userRole = role;
    },
    setUserPermissions(state, permissions) {
      state.userPermissions = permissions;
    }
  }
});

// 在登录成功的回调中
import store from './store';
// 假设response.data.role和response.data.permissions是后端返回的角色和权限信息
store.commit('setUserRole', response.data.role);
store.commit('setUserPermissions', response.data.permissions);

路由权限控制 ：使用 Vue Router 的导航守卫。

javascript

复制代码

// router.js
import Vue from 'vue';
import Router from 'vue - router';
import store from './store';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/admin',
      name: 'Admin',
      component: () => import('@/views/Admin.vue'),
      meta: {
        requiredRole: 'admin'
      }
    },
    {
      path: '/editor',
      name: 'Editor',
      component: () => import('@/views/Editor.vue'),
      meta: {
        requiredPermissions: ['editArticle']
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  const requiredRole = to.meta.requiredRole;
  const requiredPermissions = to.meta.requiredPermissions;
  const userRole = store.state.userRole;
  const userPermissions = store.state.userPermissions;

  if (requiredRole && userRole!== requiredRole) {
    next('/forbidden');
  } else if (requiredPermissions &&!requiredPermissions.every(permission => userPermissions.includes(permission))) {
    next('/forbidden');
  } else {
    next();
  }
});

export default router;

组件内权限控制 ：在组件模板中使用 v - if 根据权限显示元素。

vue

复制代码

<template>
  <div>
    <button v - if="userPermissions.includes('deleteArticle')">删除文章</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
   ...mapState(['userPermissions'])
  }
};
</script>

React 框架示例

获取和存储权限信息 ：假设使用 Redux 存储权限信息。

javascript

复制代码

// actions.js
export const setUserRole = role => ({
  type: 'SET_USER_ROLE',
  payload: role
});

export const setUserPermissions = permissions => ({
  type: 'SET_USER_PERMISSIONS',
  payload: permissions
});

// reducer.js
const initialState = {
  userRole: null,
  userPermissions: []
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER_ROLE':
      return {...state, userRole: action.payload };
    case 'SET_USER_PERMISSIONS':
      return {...state, userPermissions: action.payload };
    default:
      return state;
  }
};

// store.js
import { createStore } from'redux';
import userReducer from './reducer';

const store = createStore(userReducer);

// 在登录成功的回调中
import { setUserRole, setUserPermissions } from './actions';
// 假设response.data.role和response.data.permissions是后端返回的角色和权限信息
store.dispatch(setUserRole(response.data.role));
store.dispatch(setUserPermissions(response.data.permissions));

路由权限控制 ：使用 React Router 和自定义高阶组件（HOC）。

jsx

复制代码

// PrivateRoute.js
import React from'react';
import { Navigate, Outlet } from'react - router - dom';
import { useSelector } from'react - redux';

const PrivateRoute = ({ requiredRole, requiredPermissions }) => {
  const userRole = useSelector(state => state.userRole);
  const userPermissions = useSelector(state => state.userPermissions);

  if (requiredRole && userRole!== requiredRole) {
    return <Navigate to="/forbidden" />;
  } else if (requiredPermissions &&!requiredPermissions.every(permission => userPermissions.includes(permission))) {
    return <Navigate to="/forbidden" />;
  }

  return <Outlet />;
};

export default PrivateRoute;

// App.js
import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
import PrivateRoute from './PrivateRoute';
import Admin from './views/Admin';
import Editor from './views/Editor';
import Forbidden from './views/Forbidden';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/admin" element={
          <PrivateRoute requiredRole="admin">
            <Admin />
          </PrivateRoute>
        } />
        <Route path="/editor" element={
          <PrivateRoute requiredPermissions={['editArticle']}>
            <Editor />
          </PrivateRoute>
        } />
        <Route path="/forbidden" element={<Forbidden />} />
      </Routes>
    </Router>
  );
};

export default App;

组件内权限控制 ：在组件中使用逻辑与（&&）根据权限渲染元素。

jsx

复制代码

import React from'react';
import { useSelector } from'react - redux';

const MyComponent = () => {
  const userPermissions = useSelector(state => state.userPermissions);

  return (
    <div>
      {userPermissions.includes('deleteArticle') && <button>删除文章</button>}
    </div>
  );
};

export default MyComponent;

后端配合：前端的权限控制只是初步的展示控制，后端必须再次验证权限，以防止用户绕过前端限制，直接通过 URL 访问无权限的资源。例如，后端在处理每个请求时，根据请求中的 Token 解析出用户权限，验证该用户是否有权限执行此操作。