Vue登陆失效\未登陆跳转页面,在登陆后回到当时页面

场景:

直接提供某个页面路径带了很多参数,然后退回到登陆页面,再登陆就回到该页面。

场景一:

登录过期后回到登陆页;

javascript 复制代码
let num = 0 
service.interceptors.response.use(
    (response) => {
        const res = response.data;

        if (res.code !== 200 && res.code !== '200' && !response.config.headers.apisass) {
            if (res.code == 2010) {
                num = num + 1;
                if (num == 1) {
                    return (window.location.href = window.location.origin + '/#/login?backUrl=' + encodeURIComponent(window.location.href));
                }
            }
            if (res.code === 2011) {
                num = num + 1;
                if (num == 1) {
                    return (window.location.href = window.location.origin + '/#/login?backUrl=' + encodeURIComponent(window.location.href));
                } 如果不判断就会多次拼接 window.location.origin是域名
            }
            if (showMsg) {
                Message({
                    message: res.message || res.msg,
                    type: 'error',
                    duration: 2.5 * 1000
                });
                showMsg = false;
                setTimeout(() => {
                    showMsg = true;
                }, 2000);
            }

            return Promise.reject(res.message || res.msg || 'ErrorError');
        } else {
            return res;
        }
    },
}
场景二:

没有登陆直接去

javascript 复制代码
if (!role && to.path !== '/login' && !token) {
        Vue.prototype.$message.info('请登录');
        next('/login?backUrl=' + encodeURIComponent(window.location.href));
        return;
    }
登录处理:
javascript 复制代码
   if (this.$route.query.backUrl) {
                                    window.location.href = decodeURIComponent(this.$route.query.backUrl);
                                } else {
                                    this.$router.push('/loanDataBoard2');
                                }
相关推荐
bearpping8 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界8 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12078 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .8 小时前
前端测试框架:Vitest
前端
xiaotao1318 小时前
什么是 Tailwind CSS
前端·css·css3
颜酱9 小时前
DFS 岛屿系列题全解析
javascript·后端·算法
战南诚9 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜9 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪10 小时前
Vue的响应式和生命周期
前端·javascript·vue.js