在Web应用开发中，未登录用户访问受保护页面时，系统通常会将其引导至登录页面，登录完成后如果直接跳转至应用首页，会让用户需要重新寻找之前访问的页面，体验较差。实现登录后跳转至原始目标页面，需要前后端协同完成参数传递和状态校验工作。
核心实现逻辑
整个功能的实现可以分为三个核心步骤：
- 前端拦截未授权访问，记录原始目标页面的路径信息
- 将原始路径作为参数传递给登录接口或登录页面
- 登录成功后，后端或前端根据传递的参数跳转到对应页面
前端实现方案
路由拦截记录目标路径
以Vue框架为例，使用路由守卫拦截未登录的访问请求，将原始路径存入跳转参数中：
// 路由守卫配置
router.beforeEach((to, from, next) => {
// 判断目标页面是否需要登录权限，且当前用户未登录
const needLogin = to.meta.requireAuth
const isLogin = localStorage.getItem('token')
if (needLogin && !isLogin) {
// 跳转到登录页，同时携带原始目标路径作为参数
next({
path: '/login',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
})
登录成功后跳转
登录页面获取到redirect参数后，在登录成功的回调中执行跳转：
// 登录页面逻辑
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
async handleLogin() {
const res = await api.login({
username: this.username,
password: this.password
})
if (res.code === 200) {
// 存储登录凭证
localStorage.setItem('token', res.token)
// 获取传递的原始目标路径，没有则跳转到首页
const redirectPath = this.$route.query.redirect || '/home'
this.$router.push(redirectPath)
}
}
}
}
后端实现方案
记录原始请求路径
后端在拦截未登录请求时，可以将原始请求路径存入session中，以Java Spring Boot为例：
// 登录拦截器
@Component
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
HttpSession session = request.getSession();
Object user = session.getAttribute("user");
// 用户未登录
if (user == null) {
// 将原始请求路径存入session
String requestURI = request.getRequestURI();
session.setAttribute("redirectUrl", requestURI);
// 重定向到登录页
response.sendRedirect("/loginPage");
return false;
}
return true;
}
}
登录成功后重定向
登录接口处理完成后，从session中取出原始路径进行重定向：
// 登录接口
@RestController
public class LoginController {
@PostMapping("/login")
public String login(HttpServletRequest request, String username, String password) {
// 校验用户名密码逻辑
if ("admin".equals(username) && "123456".equals(password)) {
HttpSession session = request.getSession();
session.setAttribute("user", username);
// 获取原始路径，没有则跳转到首页
String redirectUrl = (String) session.getAttribute("redirectUrl");
if (redirectUrl == null || redirectUrl.isEmpty()) {
redirectUrl = "/home";
} else {
// 清除session中的路径记录
session.removeAttribute("redirectUrl");
}
return "redirect:" + redirectUrl;
}
return "用户名或密码错误";
}
}
注意事项
- 传递的路径参数需要做合法性校验，避免开放重定向漏洞，只允许跳转到本站内的路径
- 如果原始路径包含查询参数，需要完整传递，避免参数丢失导致页面功能异常
- 对于单页应用，建议优先使用前端路由跳转的方式，减少页面刷新带来的体验问题
- 若使用token认证，前端存储token后跳转时无需再次请求后端校验，提升跳转效率
常见问题排查
如果出现登录后没有跳转到原始页面的情况，可以按照以下顺序排查：
- 检查原始路径是否正确传递到登录页或登录接口
- 确认登录成功后跳转逻辑是否优先读取了传递的路径参数
- 排查路径参数是否被前端路由或后端拦截器二次处理导致丢失
- 检查是否存在跨域场景下的参数传递丢失问题