最近刚刚开发完成一个微信公众号，属于综合能源类的项目，有微官网有业务等等，总之东西很多是个大杂烩。其中遇到很多问题，终于有时间开回顾和总结一下这些问题。
首先，第一个问题是微信免登录的问题。刚开始是一头雾水，以为是前端去调微信的api,之前也没有做过免登录感觉头大，怎么获取openid怎么自动登录......还好后面是公司后台写的接口，前端支付至掉借口根据接口来操作，瞬间感觉轻松很多，然而并不是这样。
调调口前端也需要处理很多麻烦问题，比如我在哪个页面调接口免登录，免登录之后又回到那个页面去等等问题。奔雷觉得是不是应该单独写一个页面来做免登录的事情后面觉得还是没这个必要，就直接在登录页面路由拦截器里面完成，根据openid去调接口，如果用户是登录用户后台就会返回所需数据比如token有效时长等，成功并且返回之前的页面；如果用户未绑定登录关系，就返回之前的页面。
后面遇到很多bug,每次用户进首页会闪烁一下登录页面再进首页，微信顶部的title也会闪烁登录二字，用户体验非常不好，也是话费老半天才找到问题所在并解决。后面是给登录也加了一个loading效果，进入登录页面就loading，免登录的时候loading也为true，直到接口调完用户未绑定才取消loading返回页面。好了登录页面和路由拦截来一波代码
<script>
import store from "@/store";
import { clearInfo } from "@/common/js/rule.js";
import PublicKey from "@/config";
import { beforeList } from "@/common/js/url-white-list.js";
import { getHallInfo } from "@/api/user.js";
import { doSm3AndSm2Encrypt } from "@/config/encrypt.js";
import {
loginIn,
loginSys,
getOpenId,
getWeixinId,
loginByOpenId
} from "@/api/login.js";
import { getUserinfo } from "@/api/user.js";
import { getHomeData, getCompanyId } from "@/api/user.js";
export default {
name: "Login",
data() {
return {
nextUrl: window.localStorage.getItem("redirectUrl"),
headerTitle: "登录页面",
user: {
phone: "",
password: ""
},
roleType: 2, //角色信息
LOAGING: true,
openid: ""
};
},
computed: {},
mounted() {},
watch: {},
created() {
this.openid = this.$route.query.openid;
},
beforeRouteEnter(to, from, next) {
document.title = "";
let url = window.location.href;
// var obj = { openid: "oIM2Q1s_E-zkTklWufhxR-flumGI" };
var obj = {};
var query = url.split("?")[1];
if (query) {
var queryArr = query.split("&");
queryArr.forEach(function(item) {
var value = item.split("=")[1];
var key = item.split("=")[0];
obj[key] = value;
});
}
if (obj.openid) {
//有openid
let data = { openid: obj.openid };
loginByOpenId(data)
.then(res => {
if (res && res.access_token && res.access_token != "") {
window.localStorage.setItem("openid", obj.openid);
store.dispatch("setToken", res.access_token);
res.oprateTime = new Date().getTime(); //获取token的时间
window.localStorage.setItem("accessObj", JSON.stringify(res));
const nextUrl = window.localStorage.getItem("redirectUrl");
} else {
window.localStorage.setItem("openid", obj.openid);
const landingUrl = window.localStorage.getItem("landingUrl");
if (landingUrl) {
next({ path: landingUrl });
window.localStorage.removeItem("landingUrl");
} else {
next(vm => {
vm.LOAGING = false;
});
}
}
})
.catch(error => {
window.localStorage.setItem("openid", obj.openid);
const landingUrl = window.localStorage.getItem("landingUrl");
if (landingUrl) {
next({ path: landingUrl });
window.localStorage.removeItem("landingUrl");
} else {
next(vm => {
vm.LOAGING = false;
});
}
});
} else {
getOpenId().then(res => {
if (res) {
window.location.replace(res);
}
});
}
},
methods: {
changePage(path) {
console.log(11111111);
this.$router.push(path);
},
onSubmit() {
return false;
},
login() {
//手动登录
if (this.user.phone == "" || this.user.password == "") {
this.$toast({
message: "手机号和密码不能为空",
duration: 2000
});
return false;
}
let params = Object.assign({}, this.user, { openid: this.openid });
params.password = doSm3AndSm2Encrypt(this.user.password);
this.LOAGING = true;
loginIn(params).then(res => {
if (res.code) {
let data = Object.assign(
{ code: res.code, openid: this.openid },
params
);
loginSys(data)
.then(res => {
if (res.access_token != "" && res.token_type != "") {
clearInfo(); //清除缓存
window.localStorage.setItem("openid", this.openid);
this.$store.dispatch("setToken", res.access_token);
res.oprateTime = new Date().getTime(); //获取token的时间
window.localStorage.setItem("accessObj", JSON.stringify(res));
return false;
} else {
this.LOAGING = false;
this.$toast({ message: "登录失败", duration: 1000 });
}
})
.catch(error => {
console.log(error);
this.LOAGING = false;
if (error.response.data.error == "server_error") {
this.$toast({ message: "账号状态异常", duration: 5000 });
} else if (error.response.data.code == -1) {
this.$toast({
message: error.response.data.msg,
duration: 5000
});
} else {
this.$toast({
message: error.response.data.error_description,
duration: 5000
});
}
});
} else {
this.LOAGING = false;
this.$toast({ message: "登录异常", duration: 1000 });
}
});
}
}
};
</script>