登录成功后跳回到原来页面

应用场景:一般网页游客和登录用户看到的内容是有区别的,如果一个未登录的用户在看到登录提示后跳转到登录界面登录,那么登录成功后怎么返回到该页面呢?

假设用户在 www.example.com/a.html 看到登录提示,然后点击登录跳转到 www.example.com/login.html,登录界面使用ajax验证用户登录信息,当返回信息为成功时,在回调函数里要做这些逻辑的处理:

1.判断document.referrer是否为空,若为空本页面就不是从其它页面跳转过来的,就将页面跳转至网站首页

2.若document.referrer不为空,则需要判断前一个页面是否是本站点的页面,以免跳到其它站点去了,如果是其它站点则跳转至首页;

3.若document.referrer不为空且为本站点页面,则需要跳转至该页面

location.href = URL的方式最终以URL值调用assign()方法!

location.assign() 方法加载新的文档。

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

因此在登录成功的回调函数里执行下列操作就可以实现登录跳回刷新页面了

var prevLink = document.referrer;  
if($.trim(prevLink)==''){  
    location.href = 'www.example.com/index.html';  
}else{  
    if(prevLink.indexOf('www.example.com')==-1){    //来自其它站点  
        location.href = 'www.example.com/index.html';  
    }  
    if(prevLink.indexOf('register.html')!=-1){      //来自注册页面  
        location.href = 'www.example.com/index.html';  
    }  
    location.href = prevLink;  
}  


Vue 3 中实现未登录用户转到登录页面,并在登录完成后返回到原页面的功能,可以通过路由守卫(Router Guards)来实现。Vue Router 提供了导航守卫(navigation guards),允许你在转到路由之前进行逻辑处理。 以下是使用 Vue 3 和 Vue Router 实现该功能的一个基本步骤: 1. **设置路由守卫**:在 Vue Router 配置中为需要保护的路由添加全局前置守卫(beforeEach)。这个守卫会在路由发生变化时触发。 2. **判断用户登录状态**:在全局前置守卫中,你可以通过检查本地存储(如 `localStorage`)、Vuex 状态管理或者发起 API 请求来判断用户是否已经登录。 3. **转到登录页面**:如果用户未登录,重定向用户到登录页面。可以在全局守卫中使用 `next` 函数来控制路由转。 4. **保存目标路由**:在转到登录页面之前,可以将目标路由保存到本地存储或者通过其他方式传递给登录组件,以便登录成功后能够返回原来页面。 5. **登录成功返回页面**:在登录组件中,当用户登录成功后,读取之前保存的目标路由,并使用 `router.push` 方法重定向回原页面。 示例代码如下: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; const app = createApp(App); // 全局前置守卫 router.beforeEach((to, from, next) => { // 检查目标路由是否需要登录 const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const isAuthenticated = store.getters.isAuthenticated; // 假设Vuex中有一个isAuthenticated状态 if (requiresAuth && !isAuthenticated) { // 如果用户未登录,保存目标路由并转到登录页面 localStorage.setItem('redirectPath', to.fullPath); next({ name: 'login' }); } else { // 如果用户已登录,或者不需要登录,正常转 next(); } }); app.use(router); app.use(store); app.mount('#app'); ``` 在登录成功后,你可以在登录组件的逻辑中添加代码来处理返回操作: ```javascript // Login.vue // 假设登录成功后会调用一个名为 handleLogin 的方法 methods: { handleLogin() { // 登录逻辑... // 登录成功后,读取之前保存的路由并转 const redirectPath = localStorage.getItem('redirectPath') || '/'; router.push(redirectPath); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值