一、场景说明
利用vue做的一个单页面后台管理项目，有一个微信登录需求。具体需求是这样的，接口调用都是需要权限的（权限是通过cookie来处理的），若是没有权限，则需要先跳到微信登录页面，扫码确认登录后再跳转回来。
本地测试没问题，部署到服务器上后就没有办法直接通过域名进行访问，一篇空白，通过扫码登录登录页登录后跳转回来的页面则可以正常访问。
二、问题排查
2.1 定位错误
打开谷歌浏览器和火狐浏览器，都提示如下错误。大致意思就是语法错误，意外的标记”:“，引起这个问题的原因比较多。点击报错问题右边的具体js，提示：{code:401,message:"未登录或登录过期"}。第一反应是检查前端代码，是否后端返回未登录时有做进一步的处理。
chrome浏览器报错截图
2.2 检查代码
路由检查
查看vue的导航守卫是否正常处理。如下图所示，已正常处理相关的跳转。
router.beforeEach((to, from, next) => {
if(to.path=='/'){
next({
name:homeName // 跳转到homeName页
})
}else{
next();
}
})
请求检查
请求检查，已做了全局的拦截处理，所有请求若后台返回未登录或登录过期，均跳转到扫码登录页。扫码登录页链接的格式，根据后端要求填写即可，可能会存在不一样。我们的格式要求是：https://xxx.xxx.net/home/login?projectUrl=项目的域名&refUrl=扫码登录后返回的页面
// 响应拦截
instance.interceptors.response.use(res => {
if(res.data&&res.data.code === 401){ //未登录或者登录过期
window.location="扫码登录页";
}
this.destroy(url)
const { data, status } = res;
return { data, status }
}, error => {
//请求失败的处理
return Promise.reject(error)
})
main.js检查
main.js里放有本地测试时，自动给浏览器写入cookie，正式环境不需要，浏览器会自动携带。
import Cookies from "js-cookie";
if (process.env.NODE_ENV === 'development') {
Cookies.set('uid', '0r0UpnjEq61PEqTa9yej/CS8xxxxxxxxx, 7);
}
Cookies.set('purl', 'http://admin.xxx.xxx.net', 7);
三、再次分析报错
从二中的问题分析，发现代码并没有什么问题。按照逻辑，即使没有权限，也应该可以打开页面，只是接口无法成功请求而已，而不是一个空白页面。联想起，从跳转登录页扫码后可以正常打开页面。得出一个初步的测试结果：没有授权前，页面没有办法打开；授权后，页面可以正常打开，并且接口请求正常。
于是有了一个猜测：后端把整个域名下的所有内容都限制了权限，而不仅仅是接口，所以没有授权前连页面也无法打开。
打开chrome调试器进行确认。
打开chrome调试器 —— NetWork —— All ;查看所有的请求，发现静态资源如css、js也无法访问。验证了自己的想法。因为项目的业务需求，应该是只有接口的请求才需要权限，而不是这个域名下的所有内容。要是一开始连域名都无法访问的，显示是不行的。确定是因为这个原因卡这了，所以页面没办法打开。那就好办了，就是找后端小哥开权限的事情。
chrome报错截图02
chrome报错截图03
与后端童鞋进行问题确认。
后端小哥对登录拦截器，加上了一些特定url不做拦截，直接过，然后再次测试，问题解决！开心。
后端小哥给的修改截图
网友评论