美文网首页
VUE 前后端分离登陆后跳回原访问地址

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

作者: 爱余星痕 | 来源:发表于2020-02-21 09:58 被阅读0次

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

    1. 拦截登陆时,记录登陆前的地址
    // 拦截响应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

    1. 登陆成功后,根据参数,跳回原来地址
      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地址。
    至此,前后端分离登陆后跳回原访问地址功能已完成!

    相关文章

      网友评论

          本文标题:VUE 前后端分离登陆后跳回原访问地址

          本文链接:https://www.haomeiwen.com/subject/djwqqhtx.html