当前位置：首页 > JavaScript

js实现授权

2026-01-14 14:38:03JavaScript

授权流程设计

授权流程通常涉及前端与后端的交互，常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程：

用户提交凭证（如用户名密码）到认证服务
服务端验证通过后生成包含用户信息的JWT令牌
前端存储令牌（localStorage或cookie）
后续请求携带令牌进行授权验证

前端实现方案

基础授权拦截器示例：

// 请求拦截器
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      // 处理令牌过期情况
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

令牌管理策略

安全存储：优先使用HttpOnly Cookie，防止XSS攻击
刷新机制：实现无感刷新双令牌方案（access_token + refresh_token）
过期处理：捕获401状态码自动跳转登录页

// 双令牌刷新示例
async function refreshToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  const { data } = await axios.post('/auth/refresh', { refreshToken });
  localStorage.setItem('access_token', data.access_token);
  return data.access_token;
}

第三方授权集成

集成OAuth2.0的常见模式：

// 跳转至授权服务器
function startOAuthFlow() {
  const clientId = 'your_client_id';
  const redirectUri = encodeURIComponent('https://your-app/callback');
  const authUrl = `https://auth-server.com/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirectUri}`;
  window.location.href = authUrl;
}

// 处理回调
function handleCallback() {
  const code = new URLSearchParams(window.location.search).get('code');
  exchangeCodeForToken(code);
}

async function exchangeCodeForToken(code) {
  const { data } = await axios.post('/auth/oauth/callback', { code });
  localStorage.setItem('access_token', data.access_token);
}

权限控制实现

前端路由级权限控制示例（React Router v6）：

js实现授权

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = checkAuth(); // 自定义验证逻辑

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
};

// 使用方式
<Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />