Browse Source

优化h5端授权登录流程

master
Gao xiaosong 5 years ago
parent
commit
0605a2b4c9
  1. 4
      config/index.js
  2. 23
      libs/wechat.js
  3. 26
      main.js
  4. 6
      pages/Loading/index.vue
  5. 1
      store/index.js
  6. 24
      utils/index.js
  7. 2
      utils/request.js

4
config/index.js

@ -1,8 +1,8 @@
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api'; // export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api'; // export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
// export const VUE_APP_API_URL = 'http://192.168.31.223:8008/api'; // export const VUE_APP_API_URL = 'http://192.168.31.223:8008/api';
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api'; export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api'; // export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static'; export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static';

23
libs/wechat.js

@ -86,9 +86,11 @@ const LOGINTYPE = "loginType";
let instance; let instance;
let wechatObj; let wechatObj;
let appId let appId
let wechatLoading = false
export function wechat() { export async function wechat() {
console.log('初始化微信配置') console.log('初始化微信配置')
wechatLoading = false
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (instance) return resolve(instance); if (instance) return resolve(instance);
getWechatConfig() getWechatConfig()
@ -107,12 +109,12 @@ export function wechat() {
}) })
.catch(error => { .catch(error => {
console.log(error) console.log(error)
reject(error) reject()
}); });
}) })
.catch(err => { .catch(err => {
console.log(err); console.log(err);
reject(err); reject();
}); });
}); });
} }
@ -122,7 +124,7 @@ export function clearAuthStatus() {
cookie.remove(STATE_KEY); cookie.remove(STATE_KEY);
} }
export function oAuth() { export async function oAuth() {
console.log('处理微信授权') console.log('处理微信授权')
console.log('处理微信授权cookie', cookie.get("spread")) console.log('处理微信授权cookie', cookie.get("spread"))
console.log(store) console.log(store)
@ -137,6 +139,8 @@ export function oAuth() {
if (!code) { if (!code) {
toAuth(); toAuth();
return return
} else {
auth(code)
} }
resolve() resolve()
}).catch(error => { }).catch(error => {
@ -167,6 +171,10 @@ export function auth(code) {
} }
export function toAuth() { export function toAuth() {
if (wechatLoading) {
return
}
wechatLoading = true
wechat().then(wx => { wechat().then(wx => {
location.href = getAuthUrl(appId); location.href = getAuthUrl(appId);
}); });
@ -179,9 +187,10 @@ function getAuthUrl(appId) {
// #ifdef H5 // #ifdef H5
// #endif // #endif
debugger
cookie.set('redirect', window.location.href)
const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index?path=${encodeURIComponent(window.location.href)}`); const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
// const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index?path=${encodeURIComponent(window.location.href)}`);
// const redirect_uri = encodeURIComponent(`${window.location.origin}${window.location.pathname}`) // const redirect_uri = encodeURIComponent(`${window.location.origin}${window.location.pathname}`)
// const redirect_uri = encodeURIComponent(`${location.origin}`) // const redirect_uri = encodeURIComponent(`${location.origin}`)
cookie.remove(BACK_URL); cookie.remove(BACK_URL);

26
main.js

@ -123,17 +123,6 @@ if (urlSpread !== undefined) {
} }
} }
// 判断是否是微信浏览器
if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin'
store.commit('updateDevicetype', 'weixin')
wechat().then(() => oAuth());
} else {
Vue.prototype.$deviceType = 'weixinh5'
store.commit('updateDevicetype', 'weixinh5')
}
Vue.prototype.wechat = wechat Vue.prototype.wechat = wechat
Vue.prototype.clearAuthStatus = clearAuthStatus Vue.prototype.clearAuthStatus = clearAuthStatus
Vue.prototype.oAuth = oAuth Vue.prototype.oAuth = oAuth
@ -148,6 +137,21 @@ Vue.prototype.wechatEvevt = wechatEvevt
Vue.prototype.ready = ready Vue.prototype.ready = ready
Vue.prototype.wxShowLocation = wxShowLocation Vue.prototype.wxShowLocation = wxShowLocation
// 判断是否是微信浏览器
if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin'
store.commit('updateDevicetype', 'weixin')
let wechat = await wechat()
if (wechat) {
await oAuth()
}
} else {
Vue.prototype.$deviceType = 'weixinh5'
store.commit('updateDevicetype', 'weixinh5')
}
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS

6
pages/Loading/index.vue

@ -52,6 +52,8 @@
this.toLaunch(); this.toLaunch();
return; return;
} }
}
// cookie.get("spread"); // cookie.get("spread");
// if (this.$deviceType == "weixin") { // if (this.$deviceType == "weixin") {
// let path = parseQuery().path // let path = parseQuery().path
@ -69,9 +71,8 @@
// return // return
// } // }
// this.toLaunch(); // this.toLaunch();
if (this.$deviceType == "app" || this.$deviceType == "h5") { if (this.$deviceType == "app" || this.$deviceType == "weixinh5") {
// this.toLaunch(); // this.toLaunch();
this.$yrouter.switchTab({ this.$yrouter.switchTab({
path: "/pages/home/index" path: "/pages/home/index"
}); });
@ -82,7 +83,6 @@
path: "/pages/home/index" path: "/pages/home/index"
}); });
}); });
}
}, },
methods: { methods: {
...mapActions(["changeAuthorization", "setUserInfo"]), ...mapActions(["changeAuthorization", "setUserInfo"]),

1
store/index.js

@ -163,6 +163,7 @@ const vuexStore = new Vuex.Store({
location: state => state.location, location: state => state.location,
storeItems: state => state.storeItems, storeItems: state => state.storeItems,
goName: state => state.goName, goName: state => state.goName,
$deviceType: state => state.$deviceType,
}, },
strict: debug strict: debug
}); });

24
utils/index.js

@ -204,17 +204,22 @@ export const authorize = (authorizeStr) => {
} }
export const login = () => { export const login = () => {
debugger;
console.log(Vue.prototype) console.log(Vue.prototype)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (Vue.prototype.$deviceType == 'weixin') { if (Vue.prototype.$deviceType == 'weixin') {
// 微信授权登录 // 微信授权登录
const { code } = parseQuery() const { code } = parseQuery()
debugger;
if (code) { if (code) {
auth(code) auth(code)
.then(() => { .then(() => {
// location.replace( // location.replace(
// decodeURIComponent(decodeURIComponent(this.$route.params.url)) // decodeURIComponent(decodeURIComponent(this.$route.params.url))
// ); // );
let redirect = cookie.get('redirect')
console.log(redirect)
debugger;
location.href = decodeURIComponent( location.href = decodeURIComponent(
decodeURIComponent(this.$route.params.url) decodeURIComponent(this.$route.params.url)
); );
@ -275,7 +280,7 @@ export const login = () => {
console.log('登录接口调用成功') console.log('登录接口调用成功')
console.log('开始检查用户信息授权') console.log('开始检查用户信息授权')
let code = loginRes.code; let code = loginRes.code;
cookie.set('wxLoginCode',loginRes.code) cookie.set('wxLoginCode', loginRes.code)
// 检查授权, 检查用户信息授权 // 检查授权, 检查用户信息授权
authorize('userInfo').then(() => { authorize('userInfo').then(() => {
console.log('授权通过') console.log('授权通过')
@ -857,14 +862,19 @@ export const handleLoginFailure = () => {
console.log('————————') console.log('————————')
store.commit("logout"); store.commit("logout");
// 改为授权取消
store.commit("updateAuthorization", false); store.commit("updateAuthorization", false);
let currentPageUrl = getCurrentPageUrl() let currentPageUrl = getCurrentPageUrl()
debugger
if (store.state.$deviceType == 'weixin') { if (store.state.$deviceType == 'weixin') {
if (store.getters.isAuthorizationPage){ // 如果不是授权页面,
if (!store.getters.isAuthorizationPage) {
// 标识当前为授权页面
store.commit("updateAuthorizationPage", true);
toAuth() toAuth()
} }
return
} else { } else {
// token 失效 // token 失效
// 判断当前是不是已经在登录页面或者授权页,防止二次跳转 // 判断当前是不是已经在登录页面或者授权页,防止二次跳转
@ -895,7 +905,7 @@ export const handleLoginFailure = () => {
console.log('————————') console.log('————————')
if (qrCode.pinkId) { if (qrCode.pinkId) {
path = parseUrl({ path = parseUrl({
path: `/${currentPageUrl}`, path: `/ ${currentPageUrl} `,
query: { query: {
id: qrCode.pinkId, id: qrCode.pinkId,
} }
@ -917,7 +927,7 @@ export const handleLoginFailure = () => {
if (qrCode.bargainId) { if (qrCode.bargainId) {
path = parseUrl({ path = parseUrl({
path: `/${currentPageUrl}`, path: `/ ${currentPageUrl} `,
query: { query: {
id: qrCode.bargainId, id: qrCode.bargainId,
partake: qrCode.uid partake: qrCode.uid
@ -939,7 +949,7 @@ export const handleLoginFailure = () => {
if (qrCode.productId) { if (qrCode.productId) {
path = parseUrl({ path = parseUrl({
path: `/${currentPageUrl}`, path: `/ ${currentPageUrl} `,
query: { query: {
id: qrCode.productId, id: qrCode.productId,
} }
@ -988,7 +998,7 @@ export function chooseImage(callback) {
console.log(image); console.log(image);
uni.showLoading({ title: "图片上传中", mask: true }); uni.showLoading({ title: "图片上传中", mask: true });
uni.uploadFile({ uni.uploadFile({
url: `${VUE_APP_API_URL}/api/upload`, url: `${VUE_APP_API_URL} /api/upload`,
file: image, file: image,
filePath: image.path, filePath: image.path,
header: { header: {

2
utils/request.js

@ -12,7 +12,7 @@ import Fly from "flyio/dist/npm/wx";
import Fly from "flyio/dist/npm/wx"; import Fly from "flyio/dist/npm/wx";
// #endif // #endif
import $store from "../store"; import store from "../store";
import { handleLoginFailure } from "@/utils"; import { handleLoginFailure } from "@/utils";
import { VUE_APP_API_URL } from "@/config"; import { VUE_APP_API_URL } from "@/config";
import cookie from "@/utils/store/cookie"; import cookie from "@/utils/store/cookie";

Loading…
Cancel
Save