Skip to content

Commit e7298bc

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

File tree

5 files changed

+86
-19
lines changed

5 files changed

+86
-19
lines changed

‎src/api/user.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,15 @@ export function login(data) {
88
})
99
}
1010

11+
export function socialLogin(thirdPart,data) {
12+
return request({
13+
url: '/api/user/login/' + thirdPart + '/',
14+
method: 'post',
15+
data
16+
})
17+
}
18+
19+
1120
export function getInfo() {
1221
return request({
1322
url: '/api/user/info/',

‎src/permission.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import getPageTitle from '@/utils/get-page-title'
88

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

1313
router.beforeEach(async (to, from, next) => {
1414
// start progress bar
@@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
3232
// determine whether the user has obtained his permission roles through getInfo
3333
// console.log("check is has roles")
3434
// console.log(store.getters.roles)
35-
// question Ctrl + F5强制刷新界面，对store有啥影响吗，为啥会导致没有roles，重新获取Info？?
35+
// note Ctrl + F5强制刷新界面，对store有啥影响吗，为啥会导致没有roles，重新获取Info？?
3636
// note: 因为store是存在内存中的，所以每次刷新就会判断为空，需要重新获取数据，而cookie保存在本地，所以刷新不会丢失
3737
const hasRoles = store.getters.roles && store.getters.roles.length > 0
3838
if (hasRoles) {

‎src/router/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const routes = [
1414
redirect: '/article'
1515
},
1616
{
17-
path: '/login',
17+
path: '/login/:thirdPart?',
1818
component: LoginPage,
1919
},
2020
{

‎src/store/modules/user.js

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { login, logout, getInfo } from '@/api/user'
2-
import { getAccessToken, setAccessToken, removeAccessToken } from '@/utils/auth'
3-
import { getRefreshToken, setRefreshToken, removeRefreshToken } from '@/utils/auth'
1+
import {login, socialLogin, logout, getInfo} from '@/api/user'
2+
import {getAccessToken, setAccessToken, removeAccessToken} from '@/utils/auth'
3+
import {getRefreshToken, setRefreshToken, removeRefreshToken} from '@/utils/auth'
44
import router from '@/router'
55

66

@@ -50,12 +50,12 @@ const mutations = {
5050

5151
const actions = {
5252
// user login
53-
login({ commit }, userInfo) {
53+
login({commit}, userInfo) {
5454
// console.info("login in store")
55-
const { username, password } = userInfo
55+
const {username, password} = userInfo
5656
return new Promise((resolve, reject) => {
5757
login({ username: username.trim(), password: password }).then(response => {
58-
const data = response
58+
const data = response
5959
// console.log("login done")
6060
commit('SET_ACCESS_TOKEN', data.access)
6161
commit('SET_REFRESH_TOKEN', data.refresh)
@@ -70,11 +70,36 @@ const actions = {
7070
})
7171
},
7272

73-
73+
socialLogin({commit}, oauthInfo) {
74+
// console.info("login in store")
75+
// console.info(thirdPart)
76+
// console.info("xx")
77+
// console.info(oauthCode)
78+
// fixme 这里后续应该直接获取到github的access token发送到后端去
79+
// fixme 这样后端就不用写callback url即可
80+
const {thirdPart, oauthCode} = oauthInfo
81+
82+
const data = {code: oauthCode}
83+
return new Promise((resolve, reject) => {
84+
socialLogin(thirdPart, data).then(response => {
85+
const data = response
86+
// console.log("login done")
87+
commit('SET_ACCESS_TOKEN', data.access_token)
88+
commit('SET_REFRESH_TOKEN', data.refresh_token)
89+
// token保存在cookie和store中
90+
setAccessToken(data.access_token)
91+
setRefreshToken(data.refresh_token)
92+
// console.log("set access token done")
93+
resolve()
94+
}).catch(error => {
95+
reject(error)
96+
})
97+
})
98+
},
7499
// todo 为啥vue-element-admin框架中F5刷新界面会重新获取info，如何实现的？
75100
// todo 是permission中的限制吗？
76101
// get user info
77-
getInfo({ commit, state }) {
102+
getInfo({commit, state}) {
78103
return new Promise((resolve, reject) => {
79104
getInfo(state.accessToken).then(response => {
80105
// console.log('response is:',response)
@@ -86,7 +111,7 @@ const actions = {
86111
reject('Verification failed, please Login again.')
87112
}
88113

89-
const { roles, name, avatar, introduction } = data
114+
const {roles, name, avatar, introduction} = data
90115
// console.log("roles in getinfo is: ",roles)
91116
// roles must be a non-empty array
92117
if (!roles || roles.length <= 0) {
@@ -105,7 +130,7 @@ const actions = {
105130
},
106131

107132
// user logout
108-
logout({ commit, state, dispatch }) {
133+
logout({commit, state, dispatch}) {
109134
return new Promise((resolve, reject) => {
110135

111136
logout(state.token).then(() => {
@@ -118,7 +143,7 @@ const actions = {
118143

119144
// reset visited views and cached views
120145
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
121-
dispatch('tagsView/delAllViews', null, { root: true })
146+
dispatch('tagsView/delAllViews', null, {root: true})
122147

123148
resolve()
124149
}).catch(error => {
@@ -128,7 +153,7 @@ const actions = {
128153
},
129154

130155
// remove token
131-
resetToken({ commit }) {
156+
resetToken({commit}) {
132157
return new Promise(resolve => {
133158
commit('RESET_STATE')
134159
removeAccessToken()
@@ -138,22 +163,22 @@ const actions = {
138163
},
139164

140165
// dynamically modify permissions
141-
async changeRoles({ commit, dispatch }, role) {
166+
async changeRoles({commit, dispatch}, role) {
142167
const token = role + '-token'
143168

144169
commit('SET_ACCESS_TOKEN', token)
145170
setAccessToken(token)
146171

147-
const { roles } = await dispatch('getInfo')
172+
const {roles} = await dispatch('getInfo')
148173

149174

150175
// generate accessible routes map based on roles
151-
const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })
176+
const accessRoutes = await dispatch('permission/generateRoutes', roles, {root: true})
152177
// dynamically add accessible routes
153178
router.addRoutes(accessRoutes)
154179

155180
// reset visited views and cached views
156-
dispatch('tagsView/delAllViews', null, { root: true })
181+
dispatch('tagsView/delAllViews', null, {root: true})
157182
}
158183
}
159184

‎src/views/login/index.vue

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,8 @@
9292
capsTooltip: false,
9393
loading: false,
9494
redirect: undefined,
95+
thirdPart: undefined,
96+
oauthCode: undefined,
9597
otherQuery: {}
9698
}
9799
},
@@ -108,8 +110,27 @@
108110
}
109111
},
110112
created() {
113+
this.thirdPart = this.$route.params && this.$route.params.thirdPart
114+
this.oauthCode = this.$route.query && this.$route.query.code
115+
if (this.thirdPart && this.oauthCode) {
116+
this.loading = true
117+
this.$store.dispatch('user/socialLogin', {'thirdPart': this.thirdPart, 'oauthCode': this.oauthCode})
118+
.then(() => {
119+
this.$router.push({path: this.redirect || '/', query: this.otherQuery})
120+
this.loading = false
121+
})
122+
.catch(() => {
123+
this.$router.push({path: '/'})
124+
this.loading = false
125+
})
126+
127+
}
128+
129+
console.info("xxxxxxxxxxxxxx")
130+
111131
// window.addEventListener('storage', this.afterQRScan)
112132
},
133+
113134
mounted() {
114135
if (this.loginForm.username === '') {
115136
this.$refs.username.focus()
@@ -153,6 +174,18 @@
153174
}
154175
})
155176
},
177+
handleSocialLogin(thirdPart, oatuhCode) {
178+
this.loading = true
179+
this.$store.dispatch('user/socialLogin', thirdPart, oatuhCode)
180+
.then(() => {
181+
this.$router.push({path: this.redirect || '/', query: this.otherQuery})
182+
this.loading = false
183+
})
184+
.catch(() => {
185+
this.loading = false
186+
})
187+
188+
},
156189
getOtherQuery(query) {
157190
return Object.keys(query).reduce((acc, cur) => {
158191
if (cur !== 'redirect') {

0 commit comments

Comments
 (0)