实现单点登录跳转

src/api/login.js

@@ -1,64 +1,71 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 登录方法
 export function login(data) {
   return request({
-    url: '/auth/login',
+    url: "/auth/login",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'post',
-    showLoading:false,
-    data
-  })
+    method: "post",
+    showLoading: false,
+    data,
+  });
 }
 
 // 注册方法
 export function register(data) {
   return request({
-    url: '/auth/register',
+    url: "/auth/register",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'post',
-    data: data
-  })
+    method: "post",
+    data: data,
+  });
 }
 
 // 刷新方法
 export function refreshToken() {
   return request({
-    url: '/auth/refresh',
-    method: 'post'
-  })
+    url: "/auth/refresh",
+    method: "post",
+  });
 }
 
 // 获取用户详细信息
 export function getInfo() {
   return request({
-    url: '/system/user/getInfo',
-    method: 'get'
-  })
+    url: "/system/user/getInfo",
+    method: "get",
+  });
 }
 
 // 退出方法
 export function logout() {
   return request({
-    url: '/auth/logout',
-    method: 'delete'
-  })
+    url: "/auth/logout",
+    method: "delete",
+  });
 }
 
 // 获取验证码
 export function getCodeImg() {
   return request({
-    url: '/code',
+    url: "/code",
     headers: {
-      isToken: false
+      isToken: false,
     },
-    method: 'get',
-    timeout: 20000
-  })
+    method: "get",
+    timeout: 20000,
+  });
+}
+
+export function tokenLogin(token) {
+  return request({
+    url: `/auth/tokenlogin?token=${token}&loginType=1`,
+    method: "get",
+  });
 }
 //
 // // 获取验证码
@@ -72,4 +79,3 @@ export function getCodeImg() {
 //     timeout: 20000
 //   })
 // }
-

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/register','/tokenlogin']
 
 router.beforeEach((to, from, next) => {
   console.log('从'+from.path+'到'+to.path,'路由跳转')

src/router/index.js

@@ -41,6 +41,7 @@ export const constantRoutes = [
       }
     ]
   },
+  
 
 
 // {
@@ -70,6 +71,11 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/tokenlogin',
+    component: () => import('@/views/tokenLogin'),
+    hidden: true
+  },
+  {
     path: '/register',
     component: () => import('@/views/register'),
     hidden: true

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { login, logout, getInfo, refreshToken } from '@/api/login'
+import { login, logout, getInfo, refreshToken ,tokenLogin} from '@/api/login'
 import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
 
 const user = {
@@ -69,6 +69,25 @@ const user = {
       })
     },
 
+    TokenLogin({ commit }, token) {
+      // const username = userInfo.username.trim()
+      // const password = userInfo.password
+      // const code = userInfo.code
+      // const uuid = userInfo.uuid
+      return new Promise((resolve, reject) => {
+        tokenLogin(token).then(res => {
+          let data = res.data
+          setToken(data.access_token)
+          commit('SET_TOKEN', data.access_token)
+          setExpiresIn(data.expires_in)
+          commit('SET_EXPIRES_IN', data.expires_in)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
     // // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {

src/views/tokenLogin.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="login">
+    <div class="color-model"></div>
+    <div class="background-border"></div>
+    <img class="login-text" src="../assets/images/login-text.svg" alt="" />
+    <img class="login-logo" src="../assets/images/login-logo.svg" alt="" />
+    <el-form
+      v-loading="loading"
+      element-loading-text="正在跳转，请稍等"
+      ref="loginForm"
+      class="login-form"
+      label-width="80px"
+    >
+      <h3 class="mini-title">欢迎登录</h3>
+      <h3 class="title">移动安全保卫管理平台项目</h3>
+      <el-result v-if="!loading" :icon="icon" :title="title" :subTitle="errMessage">
+    </el-result>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
+    </div>
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from "vuex";
+import { tokenLogin } from "@/api/login.js";
+export default {
+  data() {    
+    return {
+      icon: null,
+      title: null,
+      errMessage: null,
+      loading: true,
+    };
+  },
+  created() {},
+  mounted() {
+    // this.loading = this.$loading({
+    //   lock: true,
+    //   text: "Loading",
+    //   spinner: "el-icon-loading",
+    //   background: "rgba(0, 0, 0, 0.7)",
+    // });
+    let { query } = this.$route;
+    if (!query) {
+      this.loading = false;
+      this.icon = "error";
+      this.title = "错误";
+      this.errMessage = "缺少token";
+    } else {
+      let { token } = query;
+      if (!token) {
+        this.icon = "warning";
+        this.loading = false;
+        this.errMessage = "缺少token";
+      } else {
+        this.$store.dispatch("TokenLogin",token)
+          .then((r) => {
+            this.loading = false;
+            this.$router.push({ path: "/home" }).catch(() => {});
+          })
+          .catch((e) => {
+            this.icon = "error";
+            this.title = "错误";
+            this.errMessage = "请求错误";
+            this.loading = false;
+          });
+      }
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.login {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  height: 100%;
+  background: rgba(0, 140, 214, 1) url("../assets/images/login-background.png")
+    no-repeat;
+  background-size: cover;
+  position: relative;
+}
+.color-model {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0, 140, 214, 0.5);
+}
+.background-border {
+  position: absolute;
+  width: 100%;
+  height: 342px;
+  background-color: #fff;
+  opacity: 0.2;
+  z-index: 0;
+  display: flex;
+}
+.login-logo {
+  position: absolute;
+  left: 118px;
+  top: 77px;
+  width: 245px;
+  height: 69px;
+}
+.login-text {
+  position: absolute;
+  left: 23%;
+  align-items: center;
+  width: 510px;
+  height: 190px;
+}
+.mini-title {
+  font-size: 16px;
+  text-align: center;
+  color: #999;
+}
+.title {
+  font-size: 32px;
+  margin: 0 auto 50px auto;
+  text-align: center;
+  color: #333;
+}
+.login-form {
+  margin-right: 15%;
+  border-radius: 6px;
+  background: #ffffff;
+  width: 544px;
+  height: 488px;
+  padding: 25px 60px 50px 60px;
+  z-index: 2;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>