dev-cjl
parent
5eccb83e3f
commit
076f301920
@ -0,0 +1,65 @@ |
|||||||
|
<template> |
||||||
|
<div class="p-20px"> |
||||||
|
<p class="mb-30px font-bold text-20px">微信授权登陆</p> |
||||||
|
<el-form :model="form" ref="formRef" :rules="rules" label-width="auto"> |
||||||
|
<el-form-item label="用户名" prop="username"> |
||||||
|
<el-input v-model="form.username" placeholder="请输入用户名" /> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="密码" prop="password"> |
||||||
|
<el-input v-model="form.password" placeholder="请输入密码" show-password type="password" /> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<el-button type="primary" class="w-full" @click="onSubmit">授权登陆</el-button> |
||||||
|
<div v-if="form.code">code: {{ form.code }}</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script setup name="MPLogin"> |
||||||
|
const form = ref({ |
||||||
|
code: undefined, |
||||||
|
username: undefined, |
||||||
|
password: undefined |
||||||
|
}) |
||||||
|
const formRef = ref() |
||||||
|
const rules = { |
||||||
|
username: { required: true, message: '用户名不可为空', trigger: 'blur' }, |
||||||
|
password: { required: true, message: '密码不可为空', trigger: 'blur' } |
||||||
|
} |
||||||
|
|
||||||
|
// 微信授权登陆地址 |
||||||
|
const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?' |
||||||
|
// 重定向参数-固定写法 |
||||||
|
const REDIRECT = '#wechat_redirect' |
||||||
|
|
||||||
|
const params = ref({ |
||||||
|
appid: 'wxf87aa1f474c0494f', // 公众号 APP ID |
||||||
|
redirect_uri: ``, // 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 |
||||||
|
response_type: 'code', // 固定写法 |
||||||
|
scope: 'snsapi_base' // snsapi_base 静默授权获取 open id ;snsapi_userinfo 需要用户授权,获取详细信息 |
||||||
|
// state:'code', // a-zA-Z0-9的参数值,最多128字节 |
||||||
|
}) |
||||||
|
function onSubmit() { |
||||||
|
// 这些需要判断没有 code 情况拉起授权登陆,有就结束放在重复拉起授权登陆 |
||||||
|
if (!form.value.code) { |
||||||
|
const access_url = WX_AUTH_URL + `${new URLSearchParams(params.value)}` + REDIRECT |
||||||
|
location.href = access_url |
||||||
|
} else { |
||||||
|
alert(`授权成功!`) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMounted(() => { |
||||||
|
const uri = location.origin + location.pathname |
||||||
|
params.value.redirect_uri = encodeURI(uri) |
||||||
|
// 获取地址参数 |
||||||
|
const param = new URLSearchParams(location.search) |
||||||
|
form.value.code = param.get('code') |
||||||
|
|
||||||
|
if (!form.value.code) { |
||||||
|
const access_url = WX_AUTH_URL + `${new URLSearchParams(params.value)}` + REDIRECT |
||||||
|
location.href = access_url |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
Loading…
Reference in new issue