8000 debug social login · pycoder404/blog-vue@cc867c9 · GitHub
[go: up one dir, main page]
Skip to content

Commit cc867c9

Browse files
pycoder404pycoder404
committed
debug social login
1 parent eef5ea6 commit cc867c9

File tree

5 files changed

+149
-30
lines changed

5 files changed

+149
-30
lines changed

‎src/layout/components/MainHeader.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<router-link to="/article/list" class="left-menu-item">LIST</router-link>
66
<router-link to="/article/list" class="left-menu-item">ARCHIVE</router-link>
77
<router-link to="/article/create" class="left-menu-item">NEW</router-link>
8+
89
</div>
910

1011
<div class="right-menu">

‎src/permission.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {getAccessToken} from '@/utils/auth' // get token from cookie
77
import getPageTitle from '@/utils/get-page-title'
88

99
NProgress.configure({showSpinner: false}) // NProgress Configuration
10-
10+
// fixme 后续应该不用permission进行管理了，博客相对后台管理系统只需要管理部分的路由即可
1111
const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
1212

1313
router.beforeEach(async (to, from, next) => {

‎src/utils/open-window.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
*Created by PanJiaChen on 16/11/29.
3+
* @param {Sting} url
4+
* @param {Sting} title
5+
* @param {Number} w
6+
* @param {Number} h
7+
*/
8+
export default function openWindow(url, title, w, h) {
9+
// Fixes dual-screen position Most browsers Firefox
10+
const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
11+
const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
12+
13+
const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
14+
const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
15+
16+
const left = ((width / 2) - (w / 2)) + dualScreenLeft
17+
const top = ((height / 2) - (h / 2)) + dualScreenTop
18+
const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
19+
20+
// Puts focus on the newWindow
21+
if (window.focus) {
22+
newWindow.focus()
23+
}
24+
}
25+

‎src/views/login/components/SocialSignin.vue

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div class="social-signup-container">
3+
<el-link :href="githubAuthUri" target="_self">
4+
<icon-github class="github-svg-container">
5+
</icon-github>
6+
</el-link>
7+
8+
<el-link :href="githubAuthUri" target="_self">
9+
<icon-wechat class="wx-svg-container"></icon-wechat>
10+
</el-link>
11+
12+
</div>
13+
</template>
14+
15+
<script>
16+
// import openWindow from '@/utils/open-window'
17+
import IconGithub from "@/components/SvgIcon/components/IconGithub";
18+
import IconWechat from "@/components/SvgIcon/components/IconWechat";
19+
20+
21+
export default {
22+
name: 'SocialSignin',
23+
components: {
24+
IconGithub,
25+
IconWechat
26+
},
27+
data() {
28+
return {
29+
githubAuthUri: "https://github.com/login/oauth/authorize?client_id=aa6d9aa35a3d63374015"
30+
}
31+
32+
},
33+
methods: {
34+
wechatHandleClick(thirdpart) {
35+
alert(thirdpart)
36+
console.log(thirdpart)
37+
// this.$store.commit('SET_AUTH_TYPE', thirdpart)
38+
// const appid = 'xxxxx'
39+
// const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
40+
// const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
41+
// openWindow(url, thirdpart, 540, 540)
42+
},
43+
githubHandleClick(thirdpart) {
44+
// alert(thirdpart)
45+
console.log(thirdpart)
46+
// this.$store.commit('SET_AUTH_TYPE', thirdpart)
47+
// const client_id = 'aa6d9aa35a3d63374015'
48+
// const redirect_uri = encodeURIComponent('/redirect?redirect=' + window.location.origin + '/auth-redirect')
49+
// const url = 'https://github.com/login/oauth/authorize?client_id=' + client_id + '&redirect_uri=' + redirect_uri
50+
// const url = 'https://github.com/login/oauth/authorize?client_id=' + client_id
51+
// this.$router.push(url)
52+
// openWindow(url, thirdpart, 540, 540)
53+
}
54+
}
55+
}
56+
</script>
57+
58+
<style lang="scss" scoped>
59+
.social-signup-container {
60+
margin: 10px 10px;
61+
62+
.sign-btn {
63+
display: inline-block;
64+
cursor: pointer;
65+
}
66+
67+
.icon {
68+
color: #fff;
69+
font-size: 24px;
70+
margin-top: 8px;
71+
}
72+
73+
.github-svg-container {
74+
display: inline-block;
75+
width: 40px;
76+
height: 40px;
77+
line-height: 40px;
78+
text-align: center;
79+
padding-top: 1px;
80+
border-radius: 4px;
81+
margin-bottom: 20px;
82+
margin-right: 5px;
83+
}
84+
85+
.wx-svg-container,
86+
.qq-svg-container {
87+
display: inline-block;
88+
width: 40px;
89+
height: 40px;
90+
line-height: 40px;
91+
text-align: center;
92+
padding-top: 1px;
93+
border-radius: 4px;
94+
margin-bottom: 20px;
95+
margin-right: 5px;
96+
}
97+
98+
.wx-svg-container {
99+
background-color: #24da70;
100+
}
101+
102+
.qq-svg-container {
103+
background-color: #6BA2D6;
104+
margin-left: 50px;
105+
}
106+
}
107+
</style>

‎src/views/login/index.vue

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="login-container">
3-
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
3+
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
4+
label-position="left">
45

56
<div class="title-container">
67
<h3 class="title">Login Form</h3>
@@ -20,7 +21,7 @@
2021
autocomplete="on"
2122
/>
2223
</el-form-item>
23-
24+
<!-- fixme check Caps-->
2425
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
2526
<el-form-item prop="password">
2627
<span class="svg-container">
@@ -45,38 +46,24 @@
4546
</el-form-item>
4647
</el-tooltip>
4748

48-
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.prevent="handleLogin">Login</el-button>
49-
50-
<!-- <div style="position:relative;text-align: left">-->
51-
<!-- <div class="tips">-->
52-
<!-- <span>Username : admin</span>-->
53-
<!-- <span>Password : any</span>-->
54-
<!-- </div>-->
55-
56-
<!-- <el-button class="thirdparty-button" type="primary" @click="showDialog=true">-->
57-
<!-- Or connect with-->
58-
<!-- </el-button>-->
59-
<!-- </div>-->
49+
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
50+
@click.prevent="handleLogin">Login
51+
</el-button>
6052
</el-form>
6153

62-
<!-- <el-dialog title="Or connect with" v-show="showDialog">-->
63-
<!-- Can not be simulated on local, so please combine you own business simulation! ! !-->
64-
<!-- <br>-->
65-
<!-- <br>-->
66-
<!-- <br>-->
67-
<!--&lt;!&ndash; <social-sign />&ndash;&gt;-->
68-
<!-- </el-dialog>-->
54+
<social-sign/>
55+
6956
</div>
7057
</template>
7158

7259
<script>
7360
// import { validUsername } from '@/utils/validate'
74-
// import SocialSign from './components/SocialSignin'
61+
import SocialSign from './components/SocialSignin'
7562
7663
7764
export default {
7865
name: 'LoginPage',
79-
// components: { SocialSign },
66+
components: {SocialSign},
8067
data() {
8168
const validateUsername = (rule, value, callback) => {
8269
if (value.length < 1) {
@@ -98,20 +85,19 @@
9885
password: ''
9986
},
10087
loginRules: {
101-
username: [{ required: true, trigger: 'blur', validator: validateUsername }],
102-
password: [{ required: true, trigger: 'blur', validator: validatePassword }]
88+
username: [{required: true, trigger: 'blur', validator: validateUsername}],
89+
password: [{required: true, trigger: 'blur', validator: validatePassword}]
10390
},
10491
passwordType: 'password',
10592
capsTooltip: false,
10693
loading: false,
107-
showDialog: false,
10894
redirect: undefined,
10995
otherQuery: {}
11096
}
11197
},
11298
watch: {
11399
$route: {
114-
handler: function(route) {
100+
handler: function (route) {
115101
const query = route.query
116102
if (query) {
117103
this.redirect = query.redirect
@@ -136,7 +122,7 @@
136122
// },
137123
methods: {
138124
checkCapslock(e) {
139-
const { key } = e
125+
const {key} = e
140126
this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
141127
},
142128
showPwd() {
@@ -155,7 +141,7 @@
155141
this.loading = true
156142
this.$store.dispatch('user/login', this.loginForm)
157143
.then(() => {
158-
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
144+
this.$router.push({path: this.redirect || '/', query: this.otherQuery})
159145
this.loading = false
160146
})
161147
.catch(() => {

0 commit comments

Comments
 (0)
0