增加单点登录

增加单点登录

src/store/modules/user.js

@@ -1,6 +1,7 @@
 import { login, logout, getInfo, getMenu ,getImgCode,updateUserAvatarNickname } from '@/api/user'
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
+import axios from 'axios'
 
 const state = {
   token: getToken(),
@@ -9,13 +10,17 @@ const state = {
   introduction: '',
   roles: [],
   userid:'',
-  role_id:''
+  role_id:'',
+  userurl: getUserUrl(),
 }
 
 const mutations = {
   SET_TOKEN: (state, token) => {
     state.token = token
   },
+  SET_URL: (state, url) => {
+    state.userurl = url
+  },
   SET_INTRODUCTION: (state, introduction) => {
     state.introduction = introduction
   },
@@ -36,22 +41,59 @@ const mutations = {
   },
   // 退出登录逻辑直接放在 mutations 中
   LOGOUT(state) {
-    state.token = ''
-    state.roles = []
-    removeToken()
-    resetRouter()
+    state.token = '';
+    state.roles = [];
+    state.userid = '';
+    state.role_id = '';
+    state.name = '';
+    state.avatar = '';
+    state.introduction = '';
+    removeToken();
+    removUserUrl();
+    resetRouter();
+    //退出登录跳转回原网站
+    window.location.href = "http://" + state.userurl
   }
 }
 
 const actions = {
   // 用户登录
   login({ commit }, userInfo) {
-    const { username, password, type, captcha } = userInfo
+    const { username, password, type, captcha, code } = userInfo
+
+    //会员登录进入系统并储存
+    if(userInfo.userurl){
+      //设置axios请求头
+      axios.defaults.headers.common['userurl'] = userInfo.userurl
+    }
+    //会员登录不进入系统
+    if(userInfo.backurl){
+      //设置axios请求头
+      axios.defaults.headers.common['userurl'] = userInfo.backurl
+    }
+    
     return new Promise((resolve, reject) => {
-      login({ username: username.trim(), password: password, type: type, captcha: captcha.trim() }).then(response => {
-        const { data } = response
-        commit('SET_TOKEN', data.token)
-        setToken(data.token,data.exp)
+      login({ username: username.trim(), password: password, type: type, captcha: captcha.trim(), code: code}).then(response => {
+        const { data } = response;
+
+        //会员登录跳转 但不储存
+        if(userInfo.backurl){
+          setUserUrl(userInfo.backurl,data.exp)
+          commit('SET_URL',userInfo.backurl)
+          //只设置token 不储存url
+          setToken(data.token,data.exp)
+          commit('SET_TOKEN',data.token)
+        }
+
+        //会员登录进入系统，储存所属url
+        if(userInfo.userurl){
+          setUserUrl(userInfo.userurl,data.exp)
+          commit('SET_URL',userInfo.userurl)
+          //设置token
+          setToken(data.token,data.exp)
+          commit('SET_TOKEN',data.token)
+        }
+        
         resolve(response)
       }).catch(error => {
         reject(error)
@@ -100,6 +142,7 @@ const actions = {
     })
   },
 
+
   // 用户退出
   // logout({ commit, state, dispatch }) {
   //   return new Promise((resolve, reject) => {

src/utils/auth.js

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
 const TokenKey = 'Admin-Token'
+const useUrl = 'Back-Url'
 
 export function getToken() {
   return Cookies.get(TokenKey)
@@ -11,10 +12,23 @@ export function setToken(token,exp) {
   return Cookies.set(TokenKey, token, { expires: expdays })
 }
 
+export function setUserUrl(url,exp) {
+  const expdays = convertSecondsToDays(exp)
+  return Cookies.set(useUrl, url, { expires: expdays })
+}
+
+export function getUserUrl() {
+  return Cookies.get(useUrl)
+}
+
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
 
+export function removUserUrl() {
+  return Cookies.remove(useUrl)
+}
+
 //把秒转换成天
 function convertSecondsToDays(seconds) {
   return seconds/(60*60*24); //1天=60秒*60分钟*24小时

src/views/login/index.vue

@@ -84,10 +84,7 @@
             <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="singleLogin">
               登录
             </el-button>
-            <!-- <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="handleLogin">
-              登录
-            </el-button> -->
-            <!-- <div class="singleLogin" @click="singleLogin"><i class="el-icon-cloudy" /> 单点登录测试</div> -->
+            <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
           </el-form>
           <!--开始验证表单 end-->
         </div>
@@ -98,6 +95,7 @@
 
 <script>
 import { validUserPhone } from '@/utils/validate'
+import axios from 'axios'
 
 export default {
   name: 'Login',
@@ -130,7 +128,8 @@ export default {
         username: '', // 15210211200
         password: '', // 111111
         type: 1, //1=账号密码登录
-        captcha: ''
+        captcha: '',//验证码图片
+        code:''//验证code
       },
       loginRules: { // 2.配置from表单验证规则
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@@ -215,7 +214,7 @@ export default {
               }else if(res.code!=0&&res.code!=200){
                 this.$message({
                   type:'error',
-                  message:"用户不存在！"
+                  message:res.message
                 })
               }
             })
@@ -232,8 +231,17 @@ export default {
     getImgCode() {
       const that = this
       this.$store.dispatch('user/getImgCode').then( res => {
-        console.log(res)
-        that.codeImg = res.data
+        if(res.code==200){
+          console.log(res)
+          //that.codeImg = res.data
+          that.codeImg = res.data.img;
+          that.loginForm.code = res.data.code;
+
+          console.log(that.loginForm)
+        }else{
+          this.$message.error("获取验证码失败，请稍后再试！")
+        }
+
       }).catch(() => {
         this.loading = false
       })
@@ -261,21 +269,101 @@ export default {
       }
       return null; // 如果没有找到 backurl 参数，返回 null
     },
-    //测试单点登录
+    //登录分路器 start ---------------------------------------->
     singleLogin() {
-      // 获取当前页面的 URL
-      const currentUrl = window.location.href;
+      // 获得当前域名
+      const urlString = window.location.href;
+      // 创建一个URL对象
+      const url = new URL(urlString);
+      // 获取hash部分（即#后面的部分）
+      const hash = url.hash;
+      // 从hash中提取查询参数
+      const hashParams = new URLSearchParams(hash.split('?')[1]);
+      // 获取backurl参数的值
+      const backurl = hashParams.get('backurl');
+      // 获取backurl参数的值
+      const userurl = hashParams.get('userurl');
+      // 获取可能出现的内部值
+      const system = hashParams.get('redirect');
 
-      const backurlValue = this.getBackUrl(currentUrl);
-      if (backurlValue) {
-        //console.log('backurl:', backurlValue); // 打印 backurl 的值
-        //存在backurl 准备进行单点登录
-        //回调地址backurlValue
-        
+      // 解码backurl
+      const decodedBackurl = decodeURIComponent(backurl);
+      const decodedUserurl = decodeURIComponent(userurl);
+      
+      // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
+      if(hashParams.size==0||system=='/dashboard'){
+        console.log("执行超级管理员登录！")
+        this.login(1)
+      }else{
+        // 第二种情况，含有backurl 说明是单点登录
+        if(backurl!=null){
+          console.log("执行单点登录！")
+          const backurlObj = new URL(decodedBackurl);
+          const back_url = backurlObj.hostname;
+          this.login(2,back_url)
+
+        }else if(userurl!=null){
+          //第三种情况 含有userurl 说明是会员登录
+          console.log(user_url)
+          console.log("执行会员登录！")
+          const backurlObj = new URL(decodedUserurl);
+          const user_url = backurlObj.hostname;
+
+          if(user_url==""){
+            this.$message.error("登录链接错误！")
+          }else{
+            console.log("当前登录链接是：" + user_url)
+            this.login(3,user_url)
+          }
+
+
+        }else{
+          this.$message.error("检查登录链接失败，请从正规渠道登录！")
+        }
+      }
+
+    },
+    // 登录分路器 end ---------------------------------------->
+    // 登录 start ---------------------------------------->
+    login(type,url){
+
+      //超级管理员登录
+      if(type==1){
         this.$refs.loginForm.validate(valid => {
-        if (valid) {
-            //console.log(this.loginForm)
-            //开始登录
+          if (valid) {
+            this.loading = true
+            this.$store.dispatch('user/login', this.loginForm).then( res => {
+              this.loading = false
+              console.log(res)
+              if(res.code==0){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }else if(res.code==200){
+                this.sendUrlServ()
+                console.log("登录成功，将跳转至详情页面！")
+                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+              }else if(res.code!=0&&res.code!=200){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }
+            })
+          }else {
+            console.log('表单填写错误！请检查！')
+            return false;
+          }
+        })
+      }
+      //单点登录
+      if(type==2){
+        // 获取当前页面的 URL
+        this.loginForm.backurl = url;
+
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
             this.loading = true
             this.$store.dispatch('user/login', this.loginForm)
               .then( res => {
@@ -284,18 +372,23 @@ export default {
                 if(res.code==0){
                   this.$message({
                     type:'error',
-                    message:"表单项有误，请检查！"
+                    message:res.message
                   })
                 }else if(res.code==200){
+                  const currentUrl = window.location.href;
+                  const backurlValue = this.getBackUrl(currentUrl);
                   console.log("单点登录成功，开始启动跳转！")
-                  // res.data.token
-                  // backurlValue
-                  window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token='+res.data.token;
+                  console.log(backurlValue)
+                  console.log(res.data.token)
+                  this.sendUrlServ()
+                  //下面还有一个
+                  //window.location.href = 'http://admindev.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token; //dev返回链接
+                  window.location.href = 'http://adminpre.bjzxtw.org.cn/auth/back_login.php?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
 
                 }else if(res.code!=0&&res.code!=200){
                   this.$message({
                     type:'error',
-                    message:"用户不存在！"
+                    message:res.message
                   })
                 }
               })
@@ -307,19 +400,83 @@ export default {
             return false
           }
         })
-      } else {
-        //没有backurl 直接走登录接口
-        this.handleLogin()
+
       }
+      //会员登录
+      if(type==3){
+        this.loginForm.userurl = url;
+        this.$refs.loginForm.validate(valid => {
+          if (valid) {
+            this.loading = true;
+            this.$store.dispatch('user/login', this.loginForm).then( res => {
+              this.loading = false
+              console.log(res)
+              if(res.code==0){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }else if(res.code==200){
+                this.sendUrlServ()
+                console.log("登录成功，将跳转至详情页面！")
+                this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
+              }else if(res.code!=0&&res.code!=200){
+                this.$message({
+                  type:'error',
+                  message:res.message
+                })
+              }
+            })
+
+          }else {
+            console.log('表单填写错误！请检查！')
+            return false;
+          }
+        })
+      }
+    },
+    // 登录 end ---------------------------------------->
+
+    // 返回原网站 start---------------------------------------->
+    goBackWebUrl(){
+      // 获得当前域名
+      const urlString = window.location.href;
+      // 创建一个URL对象
+      const url = new URL(urlString);
+      // 获取hash部分（即#后面的部分）
+      const hash = url.hash;
+      // 从hash中提取查询参数
+      const hashParams = new URLSearchParams(hash.split('?')[1]);
+      // 获取backurl参数的值
+      const backurl = hashParams.get('backurl');
+      // 解码backurl
+      const decodedBackurl = decodeURIComponent(backurl);
+
+      if(hashParams.size!=0&&backurl!=null){
+        window.location.href = decodedBackurl
+      }else{
+        this.$message.error("无法返回原网站，请检查登录地址链接！")
+      }
+    },
+    //登录成功通知后端 上面还有一个
+    sendUrlServ(){
+      //axios.get('http://admindev.bjzxtw.org.cn/auth/loginapi.php',{params: {
+      axios.get('http://adminpre.bjzxtw.org.cn/auth/loginapi.php',{params: {
+          token: this.$store.state.user.token
+      }}).then(res => {
+        console.log(res)
+      }).catch(err => {
+        
+      });
     }
-    // 单点登录 end ---------------------------------------->
+    // 返回原网站 end---------------------------------------->
   }
 }
 </script>
 
 <style scoped lang="less">
   .singleLogin {
-    font-size: 14px;
+    font-size: 18px;
     color: #666;
     cursor: pointer;
     margin-top: 30px;