最近剛剛開發完成一個微信公眾號，屬於綜合能源類的項目，有微官網有業務等等，總之東西很多是個大雜燴。其中遇到很多問題，終於有時間開回顧和總結一下這些問題。
首先，第一個問題是微信免登錄的問題。剛開始是一頭霧水，以為是前端去調微信的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>