前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VUE 前后端分离登陆后跳回原访问地址

VUE 前后端分离登陆后跳回原访问地址

作者头像
星痕
发布2020-02-25 16:10:17
8130
发布2020-02-25 16:10:17
举报
文章被收录于专栏:JAVA后端开发JAVA后端开发

现在前后端分离,如果用户没登陆,会跳到登陆页面,但登陆后,很多时候直接跳回首页,而不是原来未登陆页面。 解决办法如下:

  1. 拦截登陆时,记录登陆前的地址
代码语言:javascript
复制
// 拦截响应response,并做一些错误处理  
axios.interceptors.response.use((response) => {
    if(response.status ===200 && response.data && response.data.code === 401) {
        //console.log(window.location.origin);
        window.kk=response.data.stackMsg+"?redirceUrl="+encodeURIComponent(window.kk);
    }

}

如果没有登陆,就跳到登陆页,将记录原来的访问地址为redirceUrl,注意URL要编码encodeURIComponent

  1. 登陆成功后,根据参数,跳回原来地址
代码语言:javascript
复制
  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.kk=redirceUrl;
                                   }
                                   else {
                                       this.$router.push({
                                           path: '/'
                                       });
                                   }
                                } else {
                                    this.$message({
                                        message: 'token丢失',
                                        type: 'error'
                                    });
                                }

                            } else {
                                this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }

                        });

}

登陆成功后,跳到redirceUrl地址。 至此,前后端分离登陆后跳回原访问地址功能已完成!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档