perf: 三方登录

index.html

@@ -67,7 +67,7 @@
         vHeadPos: 0.618,
       },
       display: {
-        position: "left",
+        position: "center",
         width: 50,
         height: 60,
         hOffset: 0,

src/components/Login.vue

 <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">
+      <div style="flex:1;margin: 0 auto">
         <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-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>
@@ -29,6 +28,7 @@
               >
               <el-button @click="resetForm('ruleForm')">清空</el-button>
             </el-form-item>
+
           <el-form-item>
             <el-link target="_blank" @click="$router.push({ path: '/register' })"
             >没有账号?</el-link
@@ -37,7 +37,28 @@
             >去注册</el-link
             >
           </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

@@ -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

@@ -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

@@ -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)) {
+            if (!isEmpty(store.state.user.userInfo)) {
+                try {
                     // 空的 modules下的user
                     console.log('路由的登录认证')
                     // 用户自主登录
                     await store.dispatch('user/loginUserInfo', hasToken)
                     next()
-            } else {
+                } 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 {
-            // next({ path: "/login" }); //去登录
+                console.log('next')
+                next()
+            }
+        } 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

-export function loginUser (data) {
+export async function loginUser (data) {
+    return new Promise(resolve => {
+        try {
             console.log('用户登录service!', data)
             let baseUrl = '/api/user/login/'
-    let res = null
-    window.$axios_w && window.$axios_w
+            const res = window.$echarts_w
                 .post(baseUrl, data)
-        .then((o) => {
-            res = o
             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)
+            resolve(false)
+        }
     })
-    return res
 }

src/store/modules/user.js

-import { loginUser } from '@/service/user.service'
+import { loginUser } from '../../service/user.service'
 export default {
     // 自带命名空间
     namespaced: true,