Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 ccddeecb 编写于 作者: yma16's avatar yma16
浏览文件
操作

perf: 三方登录

上级 4b8812e5
隐藏空白更改
内联 并排
Showing with 128 addition and 64 deletion
index.html
浏览文件 @ ccddeecb
......@@ -67,7 +67,7 @@
vHeadPos: 0.618,
},
display: {
position: "left",
position: "center",
width: 50,
height: 60,
hOffset: 0,
......
src/components/Login.vue
浏览文件 @ ccddeecb
<template>
<div class="login" style="text-align: center">
<div class="login" style="text-align: center;width: 100%">
<el-card class="box-card" style="text-align: center" v-loading="loading">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
style="text-align: center; margin: 0 auto"
>
<el-form-item><p style="font-size: 30px">登录</p></el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<div style="flex:1;margin: 0 auto">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item><p style="font-size: 30px">登录</p></el-form-item>
<el-form-item label="账号" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
placeholder="请输入密码"
show-password
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="ruleForm.pass"
autocomplete="off"
show-password
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>登录</el-button
>
<el-button @click="resetForm('ruleForm')">清空</el-button>
</el-form-item>
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/register' })"
<el-form-item>
<el-link target="_blank" @click="$router.push({ path: '/register' })"
>没有账号?</el-link
>
<el-link type="primary" @click="$router.push({ path: '/register' })"
>
<el-link type="primary" @click="$router.push({ path: '/register' })"
>去注册</el-link
>
</el-form-item>
</el-form>
>
</el-form-item>
<el-form-item>
<div style="width: 100%">
<el-divider>三方登录</el-divider>
<div style="display: flex;width: 100%">
<div style="width:50%;text-align: center">
<img src="https://ts2.cn.mm.bing.net/th?id=ODLS.f9daea21-9936-4164-815f-b5209459f3c6&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2" style="width:10px;line-height: 56px"/>
<el-link type="primary" @click="thirdLogin('azure')"
>微软登录</el-link
>
</div>
<div style="width:50%;text-align: center">
<img src="https://sola.gtimg.cn/aoi/sola/20210118201807_hzF9zYwEBj.png" style="width:10px;line-height: 56px"/>
<el-link type="primary" @click="thirdLogin('qq')"
>QQ登录</el-link
>
</div>
</div>
</div>
</el-form-item>
</el-form>
</div>
</el-card>
</div>
</template>
......@@ -84,6 +105,23 @@ export default {
}
},
methods: {
thirdLogin (type) {
if (type === 'azure') {
this.azureLogin()
} else {
this.qqLogin()
}
},
azureLogin () {
const url = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=3a46d800-6bcc-47b5-9724-5a651b336bdb&scope=User.Read%20openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Fyongma16.xyz%2Fazure_login_callback%2F&client-request-id=d4f3e873-d59f-417d-8101-ad19aac54168&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.26.0&client_info=1&code_challenge=pmwq-hZFKj0arSiO6WXFHngszqW0cH0fwMpd-a1Vuns&code_challenge_method=S256&nonce=e8d65872-8fe9-45b4-9b4d-b0c7db70a61f&state=eyJpZCI6IjVjNGUyZDQyLTI5Y2MtNDc5MS1iMmQ4LTBiZDAwZWM5Y2M2MyIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0%3D'
const openHandle = window.open(url, '_black')
console.log('openHandle', openHandle)
},
qqLogin () {
const url = 'https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100330589&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fconnect.qq.com%2Fsdk%2Fwebtools%2Findex2.html'
const openHandle = window.open(url, '_black')
console.log('openHandle', openHandle)
},
submitForm (formName) {
const that = this // this指向
this.$refs[formName].validate((valid) => {
......@@ -160,6 +198,7 @@ export default {
}
.box-card {
position: relative;
align-self: center;
align-content: center;
display: flex;
......@@ -169,5 +208,6 @@ export default {
opacity: 1;
margin-top: 80px;
background-color: #ffffff;
box-sizing: border-box;
}
</style>
src/importElement.js
浏览文件 @ ccddeecb
......@@ -23,11 +23,17 @@ import {
Pagination,
Alert,
Notification,
Select
Select,
Divider,
Row,
Col
} from 'element-ui'
const importElementComponents = (Vue) => {
Vue.use(Container)
Vue.use(Divider)
Vue.use(Row)
Vue.use(Col)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)
......
src/main.js
浏览文件 @ ccddeecb
......@@ -2,7 +2,6 @@
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// vue cdn
import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'
import hljs from 'highlight.js'
import * as echarts from 'echarts'
......@@ -13,6 +12,7 @@ import 'github-markdown-css/github-markdown.css'
import 'nprogress/nprogress.css'
// 无需cdn
import useRouter from './router'
import VueRouter from 'vue-router'
import cookies from 'vue-cookies'
import App from './App'
import 'highlight.js/styles/github.css'
......@@ -36,7 +36,7 @@ if (env === 'production') {
// cookie
Vue.prototype.$cookies = cookies
// axios
Vue.use(axios)
// Vue.use(axios)
Vue.prototype.$axios = axios
window.$axios_w = axios
Vue.prototype.$echarts = echarts
......
src/router/index.js
浏览文件 @ ccddeecb
......@@ -20,13 +20,13 @@ const defaultRoutes = [
path: '/login',
name: 'Login',
component: Login,
hidden: true
hidden: false
},
{
path: '/register',
name: 'Register',
component: Register,
hidden: true
hidden: false
},
{
path: '/home',
......@@ -82,32 +82,50 @@ const useRouter = (Vue, VueRouter) => {
// const whiteList = ['/login', '/register']
router.beforeEach(async (to, from, next) => {
next()
let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
: ''
: {}
let name = yma16siteUserInfo.username
let pwd = yma16siteUserInfo.password
console.log('to', to)
let hasToken = {
name: name,
password: pwd
}
console.log('localStorage', hasToken)
if (hasToken.name && hasToken.password) {
if (isEmpty(store.state.user.userInfo)) {
// 空的 modules下的user
console.log('路由的登录认证')
// 用户自主登录
await store.dispatch('user/loginUserInfo', hasToken)
next()
if (!isEmpty(store.state.user.userInfo)) {
try {
// 空的 modules下的user
console.log('路由的登录认证')
// 用户自主登录
await store.dispatch('user/loginUserInfo', hasToken)
next()
} catch (e) {
console.error(e, 'e')
if (to.name === 'Login' || to.path === '/login' || to.name === 'register' || to.path === '/Register') {
// 避免同名路由无限循环
console.log('next')
next()
} else {
console.log('login router')
return next({ name: 'Login' }) // 去登录
}
}
} else {
console.log('next')
next()
}
} else {
// next({ path: "/login" }); //去登录
} else if (to.name === 'Login' || to.path === '/login' || to.name === 'Register' || to.path === '/register') {
console.log('next login register')
// 避免同名路由无限循环
next()
} else {
console.log('login router')
return next({ name: 'Login' }) // 去登录
}
return false
})
Vue.use(VueRouter)
......
src/service/user.service.js
浏览文件 @ ccddeecb
export function loginUser (data) {
console.log('用户登录service!', data)
let baseUrl = '/api/user/login/'
let res = null
window.$axios_w && window.$axios_w
.post(baseUrl, data)
.then((o) => {
res = o
export async function loginUser (data) {
return new Promise(resolve => {
try {
console.log('用户登录service!', data)
let baseUrl = '/api/user/login/'
const res = window.$echarts_w
.post(baseUrl, data)
console.log('成功认证', res)
// 只返回username
localStorage.setItem(
......@@ -15,9 +14,10 @@ export function loginUser (data) {
password: data.password
})
)
})
.catch((r) => {
resolve(true)
} catch (r) {
console.log('登录失败！', r)
})
return res
resolve(false)
}
})
}
src/store/modules/user.js
浏览文件 @ ccddeecb
import { loginUser } from '@/service/user.service'
import { loginUser } from '../../service/user.service'
export default {
// 自带命名空间
namespaced: true,
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或