Vue 如何实现登录后，跳转到登录之前要访问的页面

一、需求

有些时候，需要实现这样的功能：

项目中的有些页面是可以直接访问的，不需要登录。
但这个页面中的一些链接一些路径则需要登录后才能查看，也就是说点击这些链接的时候就直接跳转到登录页面了
在登录之后，需要重新定位到之前要访问的路径上去，而不是跳转到登录后的默认路径中

举个例子说：

login 成功后会自动跳转到 /index 页面
在 /index 页面中有一个 /user/info 的快捷路径
未登录之前点击 /user/info 这个路径，会直接跳转至 /login 页面
此时需要实现这样的功能，在登录之后，再回到之前要访问的 /user/info 路径上去

二、实现思路

那么如何实现这个需求呢。
用 store 来实现

在 store.state 中新建一个变量 lastVisitPath 记录进入登录页面之前要去的 path
登录成功之后，判断 lastVisitPath 这个变量是否有值，如果有，就跳到这个路径上去，并清空这个变量值

三、实现

在 router 的 beforeEach 方法中判断，在跳转至登录之前记录这个 lastVisitPath

// 引入 state 和 mutation
computed: {...mapState(['lastVisitRoute'])
},
methods: {...mapMutations(['SET_LAST_VISIT_ROUTE']),
}//
if (token) {} else {store.commit('SET_LAST_VISIT_ROUTE', to.path)next({path: '/login'})
}

登录成功后，如果存在 lastVisitPath 就跳转到它

// 引入 state 和 mutation
computed: {...mapState(['lastVisitRoute'])
},
methods: {...mapMutations(['SET_LAST_VISIT_ROUTE']),
}//
if (this.lastVisitRoute){this.$router.push({path: this.lastVisitRoute}).then(res => {// 跳转成功后，清除这个 lastVisitRoute 变量值this.SET_LAST_VISIT_ROUTE(null)}).catch(error => {console.log(error)});
} else {this.$router.push({path: '/'}).catch(error => {console.log(error)})
}

Vue 如何实现登录后，跳转到登录之前要访问的页面相关推荐

Spring Security——实现登录后跳转到登录前页面
基本概念暂无. 官方文档 https://docs.spring.io/spring-security/site/docs/5.3.1.BUILD-SNAPSHOT/reference/html5/ ...
Struts 拦截器权限控制【通过拦截器实现登录后跳转到登录前页面】
应用情形:在web项目中,经常会遇到用户未登录或SESSION失效时用户发出非法的权限操作,如新闻的评论.文件的下载等等,在此我们可以使用struts拦截器对该用户发出的请求进行拦截,拦截后判断用户是 ...
cas → 注销登录后跳转到登录页
cas单点登出后,默认会跳到它自带的注销界面(cas-server部署见:cas5.3:CAS Server搭建 ),业务需求往往需要跳转到自定义页面,具体实现如下: 在 application.pr ...
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由若依框架VUE前端界面,登录后默认跳转至动态路由第一路由(第一个子菜单) 一.登录后跳转第一路由界面二.设置路由的首页路径,方便后续的获 ...
织梦会员登录PHP,DEDECMS会员登录后跳转首页的简单实现方法
DEDECMS会员登录后跳转首页的简单实现方法互联网发布时间:2009-06-06 15:06:24 作者:jb51 我要评论关键字描述:简单实现方法首页会员登录 & ...
php页面怎么去登录,php中登录后跳转回原来要访问的页面实例
在很多网站用户先访问一个要登录的页面,但当时没有登录后来登录了,等待用户登录成功之后肯定希望返回到上次访问的页面,下面我就来给大家介绍登录后跳转回原来要访问的页面实例最简单的办法就是直接使用php ...
登录页面，登录后跳转不成功
一.登录后跳转不成功,原因未知二.分析①:404错误:用户操作资源不存在分析②: action跳转地址为:http:/localhost:80/day0901/login 网页中登录后实际跳转地址 ...
Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页...
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
php拦截登录页面跳转页面,PHP未登录自动跳转到登录页面
PHP未登录自动跳转到登录页面下面一段代码给大家分享php未登录自动跳转到登录页面,具体代码如下所示: namespace Home\Controller; use Think\Controller ...
mysql的免密码登录_mysql免密码登录(mysql跳过密码登录)
mysql免密码登录(mysql跳过密码登录) 2020-05-15 13:07:13 共10个回答 1.用系统管理员登陆windows系统.2.停止MySQL的服务.3.运行cmd进入dos命令窗口 ...

Vue 如何实现登录后，跳转到登录之前要访问的页面

Vue 如何实现登录后，跳转到登录之前要访问的页面

一、需求

二、实现思路

三、实现

Vue 如何实现登录后，跳转到登录之前要访问的页面相关推荐

最新文章

热门文章