移动端登录注册页面的条件重定向是前端开发中常见的需求，核心逻辑是根据用户的登录状态决定页面的跳转方向，保证用户访问流程的合理性。
核心实现逻辑
条件重定向的整体流程可以分为三个步骤：
- 获取用户的登录状态，通常从本地存储或者接口请求中获取
- 判断当前访问的页面是否为需要权限的页面
- 根据状态执行对应的跳转操作，未登录则跳转到登录注册页，已登录则放行或者跳转到目标页
原生JavaScript实现方案
在纯前端页面中，我们可以通过localStorage存储登录状态，在页面加载时判断状态执行跳转。
// 假设登录成功后将token存入localStorage
// 登录成功后执行
localStorage.setItem('user_token', 'valid_token_123');
// 需要权限的页面加载时执行条件重定向
window.addEventListener('load', function() {
// 获取登录状态
const token = localStorage.getItem('user_token');
// 获取当前页面路径
const currentPath = window.location.pathname;
// 定义不需要重定向的页面，比如登录注册页本身
const noRedirectPaths = ['/login.html', '/register.html'];
// 如果当前页面需要权限，且用户未登录
if (!noRedirectPaths.includes(currentPath) && !token) {
// 跳转到登录页，携带当前路径作为回跳参数
window.location.href = `/login.html?redirect=${encodeURIComponent(currentPath)}`;
}
});
// 登录成功后跳转到之前访问的页面
function handleLoginSuccess() {
const urlParams = new URLSearchParams(window.location.search);
const redirectPath = urlParams.get('redirect') || '/home.html';
window.location.href = redirectPath;
}
Vue框架中的实现方案
在Vue项目中，通常会使用Vue Router来管理路由，我们可以给需要权限的路由添加元信息，通过路由守卫实现条件重定向。
// 路由配置
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: Home,
meta: { requiresAuth: true } // 标记需要登录权限
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
}
];
const router = new VueRouter({
routes,
mode: 'history'
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 判断目标路由是否需要权限
if (to.meta.requiresAuth) {
// 获取登录状态，这里可以调用接口验证token有效性
const token = localStorage.getItem('user_token');
if (token) {
// 已登录，放行
next();
} else {
// 未登录，跳转到登录页，携带回跳路径
next({
path: '/login',
query: { redirect: to.fullPath }
});
}
} else {
// 不需要权限的路由直接放行
next();
}
});
// 登录组件中的登录成功逻辑
export default {
methods: {
async login() {
// 调用登录接口
const res = await api.login(this.form);
if (res.code === 200) {
localStorage.setItem('user_token', res.token);
// 获取回跳路径，默认跳转到首页
const redirect = this.$route.query.redirect || '/home';
this.$router.push(redirect);
}
}
}
};
React框架中的实现方案
React项目中可以结合React Router和自定义高阶组件实现条件重定向逻辑。
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
// 自定义需要权限的路由组件
const PrivateRoute = ({ component: Component, ...rest }) => {
// 获取登录状态
const token = localStorage.getItem('user_token');
return (
<Route
{...rest}
render={props =>
token ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: '/login',
state: { from: props.location }
}}
/>
)
}
/>
);
};
// 路由配置
const AppRouter = () => (
<BrowserRouter>
<Switch>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<PrivateRoute path="/home" component={Home} />
<Redirect from="/" to="/home" />
</Switch>
</BrowserRouter>
);
// 登录组件中的跳转逻辑
class Login extends React.Component {
handleLogin = async () => {
const res = await api.login(this.state.form);
if (res.code === 200) {
localStorage.setItem('user_token', res.token);
// 跳转到之前访问的页面或者首页
const { from } = this.props.location.state || { from: { pathname: '/home' } };
this.props.history.push(from.pathname);
}
};
render() {
return (
<div>
{/* 登录表单内容 */}
<button onClick={this.handleLogin}>登录</button>
</div>
);
}
}
注意事项
实现移动端条件重定向时需要注意以下问题：
- 避免跳转死循环，登录注册页面本身不能触发重定向逻辑，否则会不断跳转
- 登录状态判断要可靠，最好同时验证本地存储和接口返回的状态，避免本地存储被篡改
- 移动端要考虑页面回退逻辑，跳转时合理使用history的replace和push方法，避免回退到不需要的页面
- 重定向时携带的参数要进行编码，避免路径中包含特殊字符导致跳转失败