js实现强制登录
实现强制登录的常见方法
使用前端JavaScript实现强制登录通常涉及路由拦截、权限验证和状态管理。以下是几种典型实现方式：
路由拦截检查登录状态
在单页应用（SPA）中，通过路由守卫拦截未认证的访问：
// Vue Router 示例
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('authToken');
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});React应用中可使用高阶组件或useEffect：
// React 高阶组件示例
function withAuth(WrappedComponent) {
return (props) => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
if (!localStorage.getItem('authToken')) {
window.location.href = '/login';
}
}, []);
return isAuthenticated ? <WrappedComponent {...props} /> : null;
};
}全局状态监听
通过全局状态管理工具（如Redux/Vuex）监听登录状态变化：
// Redux 中间件示例
const authMiddleware = store => next => action => {
const state = store.getState();
if (!state.auth.isLoggedIn && action.type !== 'LOGIN_SUCCESS') {
window.location.replace('/login');
}
return next(action);
};定时令牌检查
针对JWT等有时效性的令牌，设置定时检查：
function checkTokenExpiry() {
const token = localStorage.getItem('jwt');
if (token && isTokenExpired(token)) { // 需实现isTokenExpired函数
localStorage.removeItem('jwt');
window.location.href = '/login?expired=true';
}
}
// 每5分钟检查一次
setInterval(checkTokenExpiry, 300000);HTTP拦截器
通过axios等库的拦截器实现请求时验证：
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) {
window.location.href = '/login?session_expired=1';
}
return Promise.reject(error);
}
);关键注意事项
- 前端验证不可替代后端验证，所有敏感API必须进行服务端鉴权
- 敏感操作应使用HTTP Only的Secure Cookie存储凭证
- 对于SSR应用，需结合服务端中间件（如Express的
passport）进行验证 - 页面刷新时需重新初始化状态，建议使用
sessionStorage或Cookie持久化登录状态
以上方法可根据具体技术栈组合使用，建议结合框架提供的官方认证方案（如React的Context API、Vue的Vuex-PersistedState等）增强稳定性。
