现在前后端分离,如果用户没登陆,会跳到登陆页面,但登陆后,很多时候直接跳回首页,而不是原来未登陆页面。
解决办法如下:
- 拦截登陆时,记录登陆前的地址
// 拦截响应response,并做一些错误处理
axios.interceptors.response.use((response) => {
if(response.status ===200 && response.data && response.data.code === 401) {
//console.log(window.location.origin);
window.location.href=response.data.stackMsg+"?redirceUrl="+encodeURIComponent(window.location.href);
}
}
如果没有登陆,就跳到登陆页,将记录原来的访问地址为redirceUrl,注意URL要编码encodeURIComponent
- 登陆成功后,根据参数,跳回原来地址
AjaxByAll('post', 'sys/login/loginSystem', this.ruleForm).then(data => {
if (data.code === 200) {
if (data.data) {
localStorage.setItem('token', data.data);
let redirceUrl = this.$route.query.redirceUrl;
if (typeof redirceUrl != 'undefined') {
window.location.href=redirceUrl;
}
else {
this.$router.push({
path: '/'
});
}
} else {
this.$message({
message: 'token丢失',
type: 'error'
});
}
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
});
}
登陆成功后,跳到redirceUrl地址。
至此,前后端分离登陆后跳回原访问地址功能已完成!
网友评论