记一次单点登录遇到的router.beforeEach的问题

最新推荐文章于 2022-08-08 15:12:38 发布
最新推荐文章于 2022-08-08 15:12:38 发布
阅读量537 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41060844/article/details/121117152
版权
本文记录了一次在实现单点登录时遇到的问题，即从A系统跳转到B系统并获取到URL上的token后，由于Vue.js的router.beforeEach重定向导致token丢失。通过在导航守卫中正确使用`to`而不是`from`来获取URL参数，最终解决了这个问题。这是一个关于Vue.js路由和单点登录实施的故障排除案例。
摘要由CSDN通过智能技术生成

记一次单点登录遇到的问题

问题形成的原因及过程

根据业务的需求， 需要做一次单点登录，通过A系统跳转到B系统

http://111.222.333.444:88/bsp/service/sso?appUrl=http://aa.bb.cc.dd:16780
最低0.47元/天 解锁文章
我也不想当程序员
关注
08 使用Vue+vue-router+路由守卫实现路由鉴权功能实战
xingyu_qie的专栏
03-26 4827
本文主要是router的拆分，通过进行路由守卫进行用户路由的鉴权控制，还包含了404页面的实现，el-button的自研实现
vue中，单点登录问题及router.beforeEach()的使用
weixin_43703816的博客
05-18 1988
在开发过程中，会碰到一个需求就是，单点登录。 1、单点登录的第一个问题就是解决cookie共享的问题，也就是说是cookie跨域了。 这个具体就是在测试的时候，改一个本地hosts文件，改成和一级域名一样的就可以。 比如 一级域名是： xxx.com ， 而hosts文件 本地的项目就可以改成是： a.xxx.com 127.0.0.1 接着就是重新启动项目，访问a....
token 存储，token失效
lryh_的博客
04-20 2284
token 存储，token失效
VUE的路由拦截未获取token
HarryHY的博客
10-11 1593
main.js // 全局前置守卫 router.beforeEach((to, from, next) => { if (to.matched.some((item) => item.meta.token)) {//router里的meta的键名 let token = sessionStorage.getItem("token");//你要根据拦截的信息 if ...
axios捕获401 赋值token
weixin_30500289的博客
07-16 673
//捕获401 // http request 拦截器 axios.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token /...
路由导航守卫实现无token跳转到登录页面
可可爱爱的你吖的博客
03-25 950
路由导航守卫实现无token跳转到登录页面 import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' // progress bar进度条 import 'nprogress/nprogress.css'// progress bar style import { getToken } from '@/util
vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)
qq_26282869的博客
03-11 1万+
1:在main.js(我是在app.js里面写的)全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限 ...
详解vue beforeEach 死循环问题解决方法
10-15
本文将详细解释什么是beforeEach，什么是路由守卫，以及如何解决beforeEach造成的死循环问题。 首先，我们来了解什么是路由守卫。在vue-router中，路由守卫主要是用来在路由发生变化前后执行一些逻辑判断，比如权限...
vue-router 权限控制的示例代码
08-29
在本篇文章中，作者提出了实现菜单权限的思路，即在登录成功后，从服务器获取菜单列表，然后在 beforeEach 里将返回的菜单列表和本地配置的路由进行对比，如果存在则有权限访问。 知识点三： 问题与解决思路 作者...
在vue项目中使用Nprogress.js进度条的方法
10-18
例如，可以在`router.beforeEach`中判断是否需要显示进度条，并在路由跳转开始时调用`NProgress.start()`，在`router.afterEach`中调用`NProgress.done()`结束进度条显示： ```javascript router.beforeEach((to, ...
vue2.0实现单点登录思路以及简单代码
qq_41254514的博客
08-08 4226
首先单点登录简单来说就是不走自己的登录页走三方的登录系统，然后通过重定向回到自己的系统中，那么就需要有三个必须参数 1.三方的登录地址 2.重定向回到系统的地址 3.三方系统获得的token令牌 一切准备就绪后 开始着手码代码了...
vue+vue-router+axios 实现权限登录和token验证
qq_40710228的博客
08-30 3347
大致说一下整体的流程与思路 1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码（因为用的是GitHub的personal access tokens所以这步省略） 2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token（本次测试用到是GitHub的personal access tokens） 3、前端拿到token，将token存储到localStorage和v...
VUE学习（四）router、路由传参、路由守卫基于token
renzong_dai的博客
10-29 641
router（一）、载入路由 vue-router（二）、路由跳转（4种方式）传参2.1、router-link（组件调用）`相当于ab标签`2.1.1. 不带参数2.1.2.带参数2.2、 this.$router.push() router-link（函数里面调用）2.2.1、不带参数2.2.2、query传参 （类似get传参）2.2.3、params传参(类似post传参)2.2.4、location预声明参数模式2.2.5、query和params区别2.3、this.$router.replac
vue-router中手动输入url地址beforeEach不生效
karlif的博客
08-24 1681
** vue-router中手动输入url地址beforeEach不生效 **在手动输入地址栏url时候，new Vue()函数未将router.beforeEach()这个函数加载到实例中去。 解决方法：将router.beforeEach()这个函数写到Vue实例加载之前，在手动输入地址栏时候便可使得函数生效 插入链接与图片 图片: 代码如下 router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { if (local
vue 动态加载路由刷新页面空白，进入不了router.beforeEach
h498549434的博客
10-29 2338
因为我在挂载el之后检查的路由，把路由放前面就好了 new Vue({ el: ‘#app’, router, store, template: ‘’, components: { App } }) 把上面的放在 router.beforeEach方法后面
Vue - 路由守卫实现携带Token登录
LinTa0的博客
06-09 2160
Vue - 路由守卫实现携带Token登录
vue中router.beforeEach() 的一个坑
weixin_43703816的博客
05-11 2748
vue中router.beforeEach() 的一个坑
url跳转,如何携带token?不能通过url拼接传递,还有别的方式吗?
热门推荐
time海伦的博客
07-01 1万+
当然有，把window.name利用起来就可以搞定了 开发过程中遇到了个问题，从当前页A（http://www.aaa.com）跳转到新页面B（http://www.bbb.com）时，想要传递A的token给B，以便B页面不登陆直接使用token获取数据 正常情况下是在A页面直接使用： window.open('http:www.bbb.com?token=token') 这时打开的新窗口的地址栏上就可以直接看到这个token了，测试认为这样是不安全的，不希望地址栏显示token 这时就可以使
router.beforeEach和 router.afterEach区别
最新发布
08-19
`router.beforeEach` 和 `router.afterEach` 是 Vue Router 提供的两个路由导航守卫钩子函数，它们在路由导航过程中起到不同的作用。 1. `router.beforeEach`： - 作用：在每次路由切换之前执行，用于进行全局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值