当前位置:网站首页>全程实现单点登录功能和请求被取消报错“cancelToken“ of undefined的解决方法
全程实现单点登录功能和请求被取消报错“cancelToken“ of undefined的解决方法
2022-07-06 06:04:00 【不要睡觉哦i】
1:单点登录实现效果
1:我这里的项目是内嵌到其他项目里的,可以说我这是子项目,
2:父项目打开一个菜单导航,页面内容为内嵌iframe
3:此时子项目显示在iframe中,并且免除登录步骤,直接进入首页显示数据
2:实现流程
1:父项目通过iframe给我们传递一个标识,
2:我们在登录页面判断此标识,在成功的回调里单独编写一份登录的方法
(如果调用点击按钮登录的方法,会报错 cancelToken of undefined : 请求取消),
3:存储token,跳转到首页。此时的效果就是父项目打开他的导航菜单就直接通过iframe显示内嵌项目的首页,
3:子项目代码
重点:单点登录的代码不能写在 export default 对象内
<script>
import {
validUsername } from "@/utils/validate";
import axios from "axios";
import router from "@/router";
import {
Message } from "element-ui";
注释:父项目传来的标识是window.name,这里我是直接判断window.name
if (window.name == "iframeID1") {
注释:这里这里我们要后台写一个获取密码的接口,这样我们在单点登录后修改密码,也能随时取用最新的密码继续来进行单点登录
axios({
url: "/v1/get/pwd",
method: "post",
headers: {
"content-type": "application/json",
},
}).then((res) => {
注释:获取密码后,把密码传递给登录接口的密码字段
axios({
url: "/v1/user/login",
method: "post",
data: {
name: "admin",
pwd: res.data.pwd,
},
json: true,
headers: {
"content-type": "application/json",
},
}).then((res) => {
if (res.data.resultState == "success") {
注释:判断登录成功后,我这里是吧token存到了本地,并且跳转页面
sessionStorage.setItem("pwdtoken", res.headers.pwdtoken);
router.push(`/`);
} else if (
res.data.resultState == "fail" &&
res.data.resultMsg == "pwd error!"
) {
Message({
message: "密码错误",
type: "error",
});
} else {
Message({
message: "登录出错",
type: "error",
});
}
});
});
}
export default {
......}
4:父项目代码
父代码只是为了给子项目传递一个标识,所以这里我直接贴图片
5:单点登录常见问题
单点登录实现的过程也挺艰难的,毕竟从未接触过这种需求,也没有人可以求助,所以就自己不断摸索。
从开始到结束其实也没什么问题,主要的问题就是不知道怎么实现,一头雾水的问题。
当实现后其实也挺简单的。上面的代码也并不难,不算多,但能把问题给解决了。
这些代码都是好几天摸索出来的,我下面就说说我遇到过的问题
1:最开始是父项目内创建了子项目的axios,也在父项目内写了子项目的登录功能,但问题是ip不能改变
2:也是跟在第一个问题上,因为子项目的token是本地存储(sessionStorage)的,所以父项目写了子项目的登录功能也进行了token存储,
自然也只是存到了父项目ip上,本地的子项目ip还是需要在内嵌的页面中点击子项目的登录按钮,
走子项目的登录功能,才能把token存到子项目的ip上,但是单点登录就是为了取消这一步骤才存在的。
中间也想了本地存储的setitem能不能改变ip存储,自然也是不可能的
3:这个时候也已经借助了百度中搜索的其中一个方法,用iframe传递标识给子项目,子项目靠这个标识来编写代码。这个时候问题也卡在了token上,也就是第二步token存储的问题
然后就把本地存储改成了vuex也就是在这个时候遇到了"cancelToken" of undefined的问题,我们在下一个目录来细说。
4:最后把"cancelToken" of undefined的问题彻底解决后发现还是不行。我就直接单独在判断标识的地方又写了一个登录的api方法,
然后也就从这一步开始才找到了突破点,最后一点点调试修改才完成
5:因为是两个人一起商量着来的,但是另一个同事居家,沟通也不方便,整体来说有点难,但解决了,也挺不错的。
6:“cancelToken” of undefined请求异常
这个错误图片说明了我们请求正常也不正常。请求是请求了,但是我写的log响应却没有打印,
请求之后就报错了,说明我们请求被终止了,没有响应
其实这个错百度一搜都能出来,几个网页打开都是同样的答案,但是也都不能解决问题。
其实这个问题的原因是请求被取消了
我有两次这种情况
1:我把登录api方法写在的vuex的actions里,点击登录按钮调用vuex的方法,
这里是第一次出现"cancelToken" of undefined,我这样写是为了把token存到vuex里。
后来我把登录api的方法写在了登录页的登录按钮点击方法上,
然后在成功回调里再调用vuex的actions方法,此时vuex的方法只有存储token的功能,
"cancelToken" of undefined的错误被解决了。
2:我在实现单点登录时判断的window.name后,没有另外写登录api方法,而是用了一些手法,
把登录方法和账号密码挂载到了window上。
此时通过window调用登录方法也报错"cancelToken" of undefined,同样请求被取消。
最后我把调用的方法改成了用axios单独重写一个登录api方法,这才没有报错
3:总结:
"cancelToken" of undefined的报错并不单单是因为拦截器里没有return config
当直接调用封装的需要有操作才能执行的方法时,也会报这个错。
这时我们就要知道我们应该再重写一个api方法,不要再为了省事去直接调用了
结束!
边栏推荐
- Database: ODBC remote access SQL Server2008 in oracel
- Redis6 cluster setup
- The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
- c语言——冒泡排序
- Web service connector: Servlet
- [postman] test script writing and assertion details
- CoordinatorLayout+NestedScrollView+RecyclerView 上拉底部显示不全
- Memory and stack related concepts
- [Thesis code] SML part code reading
- [course notes] Compilation Principle
猜你喜欢
Practice sharing: how to safely and quickly migrate from CentOS to openeuler
H3C V7 switch configuration IRF
Wib3.0 leapfrogging, in leapfrogging (ง • ̀_•́) ง
请求转发与重定向
c语言——冒泡排序
误差的基本知识
养了只小猫咪
Buuctf-[gxyctf2019] no dolls (xiaoyute detailed explanation)
(5) Explanation of yolo-v3 core source code (3)
Web service connector: Servlet
随机推荐
J'ai un chaton.
【课程笔记】编译原理
Redistemplate common collection instructions opsforvalue (II)
Amazon Engineer: eight important experiences I learned in my career
[Baiwen smart home] first day of the course_ Learn Embedded and understand the development mode of bare metal and RTOS
H3C V7 switch configuration IRF
Idea new UI usage
数学三大核心领域概述:几何
Interface test: what are the components of the URL in fiddler
【Postman】动态变量(也称Mock函数)
[postman] dynamic variable (also known as mock function)
[Thesis code] SML part code reading
The ECU of 21 Audi q5l 45tfsi brushes is upgraded to master special adjustment, and the horsepower is safely and stably increased to 305 horsepower
Manhattan distance and Manhattan rectangle - print back font matrix
Reading notes of effective managers
Huawei BFD configuration specification
Some easy-to-use tools make your essay style more elegant
As3013 fire endurance test of cable distribution system
Buuctf-[[gwctf 2019] I have a database (xiaoyute detailed explanation)
[course notes] Compilation Principle