出于一些考虑,这里我在页面跳转时并没有使用React-router框架,仅使用了传统方法实现了页面传值,并且在另一个页面用于检测传递过来的参数是否合法
大体思路是这样的,在另一个页面采用一个统一的父组件。在这个组件的生命周期中使用特定的方法来判断,并且完成向子组件传递数据的功能:
componentWillMount(){
let url = window.location.search;//获取到地址栏参数 ?uid=1
console.log(url);
let strs = url.slice(1);
let strArr = strs.split("&");
let uid="";
let option="";
for(let i=0;i<strArr.length;i++){
let temp = strArr[i].split("=");
if (temp[0]==="uid"){
uid = temp[1];//获取uid
}
if (temp[0]==="option"){
option = temp[1];//获取时间选项
}
}
console.log("预处理后uid="+uid+"option="+option)
if (uid===""){
alert("不合法的访问形式");
window.location.href='index.html'
}
console.log(option !== "0.5");//false
console.log(option !== "1")
console.log(option !== "2")
if (option===""){
alert("参数不正确");
window.location.href='home.html?uid='+uid
}
if (option !== "0.5"|| option !== "1" || option !== "2"){
alert("参数传递错误");
window.location.href='home.html?uid='+uid
}
console.log("接收到参数uid="+uid+" option="+option);
//接下来判断该账号是否有权限,若无权限则跳转至登录页面,并且提示用户当前为非法访问
let login="";
$.ajax({
url: "http://localhost:8080/isLogin?uid="+uid,
type: "GET",
async: false,//设置不是异步,等这个函数执行完了再往下执行
dataType:"json",
success: function(data){
login = data.login;
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("error in ajax")
}
});
if (login !== "1"){
alert("当前为非法访问,请先去登录");//此处停止渲染组件,转移到登录页面
window.location.href='index.html'//或许可以用State控制
}else{
this.props.account=uid;//传值给子组件
this.props.option = option
}
}
个人见解,如若有误,还请不吝赐教!