增加单点登录功能

增加单点登录功能

src/layout/components/Navbar.vue

@@ -287,12 +287,14 @@ export default {
       axios.get(BASEURL.WebCLogoutUrl, { params: { token: token } }).then(response => {
         console.log(response);
         this.$store.commit("user/LOGOUT");
-        this.$router.push(`/login`);
+        //this.$router.push(`/login`);
+        window.location.reload();
       }).catch(error => {
         console.log(error);
         this.$store.commit("user/LOGOUT");
-        this.$router.push(`/login`);
-        this.$message.error(response.message);
+        // this.$router.push(`/login`);
+        // this.$message.error(response.message);
+        window.location.reload();
       });
     },
     // async logout() {

src/permission.js

@@ -1,117 +1,127 @@
-import router from './router'
-import store from './store'
-import { Message } from 'element-ui'
-import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css' // progress bar style
-import { getToken,setUserUrl, setUseType,setWebSiteId,hashParams,getUseType,getUserUrl} from '@/utils/auth' // get token from cookie
-import getPageTitle from '@/utils/get-page-title'
-import URL from '@/utils/baseUrl';
-import {getInfo} from '@/api/user'
-NProgress.configure({ showSpinner: false }) // NProgress Configuration
+//1.引入vue-element-admin 依赖 start ---------------------------------------->
+import router from './router'//引入路由
+const whiteList = ['/login', '/auth-redirect','/no-permission']//配置路由白名单
+import store from './store'//引入vuex
+import { Message } from 'element-ui'//引入element的弹框提示
+import getPageTitle from '@/utils/get-page-title'//获得系统标题
+import NProgress from 'nprogress'//引入进度条库
+import 'nprogress/nprogress.css'//引入进度条样式
+NProgress.configure({ showSpinner: false })
+//1.引入vue-element-admin依赖 end ---------------------------------------->
 
-const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+//2.引入单点登录需要的方法 start ---------------------------------------->
+import { getToken, setUserUrl, getUseType, getUserUrl,setUseType,setWebSiteId,
+hashParams,removeToken,getLoginType,getBackUrlValue } from '@/utils/auth' //设置cookie的方法
+import URL from '@/utils/baseUrl'; //获得请求路径
+import { getInfo } from '@/api/user' //获得用户信息
+//2.引入单点登录需要的方法 end ---------------------------------------->
 
-router.beforeEach(async(to, from, next) => {
-  // start progress bar
-  NProgress.start()
+//3.设置路由守卫 start ---------------------------------------->
+router.beforeEach(async (to, from, next) => {
+    //3.1 当路由开始改变时，加载进度条
+    NProgress.start()
+    //3.2 设置系统标题
+    document.title = getPageTitle(to.meta.title)
+    //3.3 检查cookie中的token是否已经存在
+    const hasToken = getToken()
 
-  // set page title
-  document.title = getPageTitle(to.meta.title)
-
-  // determine whether the user has logged in
-  const hasToken = getToken()
-  //检测token的状态
-  await store.dispatch('user/logoutStatus')
-
-  if (hasToken) {
-    if (to.path === '/login') {
-      
-      // Retrieve userurl
-      const userurl = hashParams();
-      if(userurl){
-        setUserUrl(userurl, 86400) 
-      }
-  
-      const userInfo = await getInfo();
-      console.log("User Info:", userInfo);
-      if (userInfo.code === 200) {
-        setUseType(userInfo.data.userType, 86400)
-        setWebSiteId(userInfo.data.siteId, 86400)
-        next({ path: '/' })
-        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
-      }else{
-        next({ path: '/' })
-        NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
-      }
-      // if is logged in, redirect to the home page
-
-    
-    } else {
-      // determine whether the user has obtained his permission roles through getInfo
-      const hasRoles = store.getters.roles && store.getters.roles.length > 0
-      if (hasRoles) {
-        next()
-      } else {
-        try {
-          // get user info
-          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
-          const { roles } = await store.dispatch('user/getInfo')
-
-          // generate accessible routes map based on roles
-          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
-
-          // dynamically add accessible routes
-          router.addRoutes(accessRoutes)
-
-          // hack method to ensure that addRoutes is complete
-          // set the replace: true, so the navigation will not leave a history record
-          next({ ...to, replace: true })
-
-          // Call getInfo to fetch user information
-          const userInfo = await getInfo();
-          console.log("User Info:", userInfo);
-        } catch (error) {
-          // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
+    //3.4 如果token存在
+    if (hasToken) {
+        //3.4.1 如果有token，而且是在登录页面
+        if (to.path === '/login') {
+            //获取登录参数，是backurl还是userurl
+            let loginType = getLoginType(window.location.href)
+            if(loginType == 'userurl'){
+                //如果是userurl
+                const userurl = hashParams();
+                if (userurl) {
+                    setUserUrl(userurl, 86400)
+                }
+                const userInfo = await getInfo();
+                console.log("User Info:", userInfo);
+                if (userInfo.code === 200) {
+                    console.log("####")
+                    //每次返回login的时候都获取一下用户类型和网站id
+                    setUseType(userInfo.data.type_id, 86400)
+                    setWebSiteId(userInfo.data.website_id, 86400)
+                    next({ path: '/' })
+                    NProgress.done() 
+                } else {
+                    if(userInfo.code == -1){
+                        next({ path: '/' })
+                        NProgress.done()
+                    }else{
+                        next({ path: '/' })
+                        NProgress.done()
+                    }
+                }
+            }
+            if(loginType == 'backurl'){
+                //如果是backurl
+                const backurl = getBackUrlValue(window.location.href)
+                //带着token返回原网站
+                window.location.href = backurl + '?backurl=' + backurl + '&admintoken=' + getToken()
+            }
+        } else {
+            //3.4.2 如果有token，但是没在登录页面
+            const hasRoles = store.getters.roles && store.getters.roles.length > 0
+            //此时分为两种情况，一种是用户通过路由访问，一种是用户从url直接访问（刷新）时执行
+            if (hasRoles) {
+                const userInfo = await getInfo();
+                //如果用户没有权限登录该网站，返回登录页面
+                if(userInfo.code == -1){
+                    console.log("用户没有访问权限，将跳转到无权限页面！")
+                    if (to.path !== '/no-permission') {
+                        //避免重复跳转
+                        next({path:'/no-permission'})
+                    } else {
+                        //已经在无权限页面，不再跳转
+                        next()
+                    }
+                    NProgress.done()
+                }else{
+                    setUseType(userInfo.data.type_id, 86400)
+                    setWebSiteId(userInfo.data.website_id, 86400)
+                    console.log("用户有访问权限，访问继续！")
+                    next()
+                }
+            } else {
+                //页面刷新的时候执行
+                try {
+                    const { roles } = await store.dispatch('user/getInfo')
+                    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
+                    router.addRoutes(accessRoutes)
+                    next({ ...to, replace: true })
+                } catch (error) {
+                    await store.dispatch('user/resetToken')
+                    Message.error(error || 'Has Error')
+                    next(`/login?redirect=${to.path}`)
+                    NProgress.done()
+                }
+            }
         }
-      }
-    }
-  } else {
-    /* has no token*/
-    if (whiteList.indexOf(to.path) !== -1) {
-      const userurl = hashParams();
-      if(userurl){
-        setUserUrl(userurl, 86400) 
-      }
-      // in the free login whitelist, go directly
-      next()
+
     } else {
-      const userType = getUseType()
-      if(userType==10000){
-        next(`/login?redirect=${to.path}`)
-        NProgress.done()
-        setUserUrl(URL.webUrl, 86400)
-      }else{
-        const userurl = getUserUrl();
-        let url=''
-        if (!userurl.startsWith('http://') && !userurl.startsWith('https://')) {
-          // 如果不是，则拼接上 http://
-          url = 'http://' + userurl;
-        }else{
-          url = userurl;
+        //3.5 如果token不存在
+        if (whiteList.indexOf(to.path) !== -1) {
+            const userurl = hashParams();
+            if(userurl){
+                //更新backurl
+                setUserUrl(userurl, 86400) 
+            }else{
+                //设置来源网站为当前域名
+                setUserUrl(window.location.host,86400);
+            }
+            next()
+        } else {
+            next(`/login`)
+            NProgress.done()
         }
-        next(`/login?backurl=${url}`)
-        NProgress.done()
-        setUserUrl(userurl, 86400)
-      }
     }
-  }
 })
 
 router.afterEach(() => {
-  // finish progress bar
-  NProgress.done()
+    //路由改变完毕后，结束进度条
+    NProgress.done()
 })
+//3.设置路由守卫 end ---------------------------------------->

src/router/index.js

@@ -60,6 +60,11 @@ export const constantRoutes = [
     component: () => import('@/views/login/auth-redirect'),
     hidden: true
   },
+  {
+    path: '/no-permission',
+    component: () => import('@/views/login/no-permission'),
+    hidden: true
+  },
   {
     path: '/404',
     component: () => import('@/views/error-page/404'),

src/store/modules/user.js

@@ -2,6 +2,7 @@ import { login, logout, getInfo, getMenu ,getImgCode,updateUserAvatarNickname,lo
 import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl,getUseType,removUseType,setUseType,getExp,setExp,removeExp,setWebSiteId,getWebSiteId,removeWebSiteId } from '@/utils/auth'
 import router, { resetRouter } from '@/router'
 import axios from 'axios'
+import { getUserInfo } from '@/api/userMember'
 
 const state = {
   token: getToken(),
@@ -53,20 +54,19 @@ const mutations = {
   },
   // 退出登录逻辑直接放在 mutations 中
   LOGOUT(state) {
-    state.token = '';
-    state.roles = [];
-    state.userid = '';
-    state.role_id = '';
-    state.name = '';
-    state.avatar = '';
-    state.introduction = '';
+    // state.token = '';
+    // state.roles = [];
+    // state.userid = '';
+    // state.role_id = '';
+    // state.name = '';
+    // state.avatar = '';
+    // state.introduction = '';
     removeToken();
+    removeWebSiteId();
+    removeExp();
     removUserUrl();
     resetRouter();
     removUseType();
-    removeExp();
-    //退出登录跳转回原网站
-    window.location.href = "http://" + state.userurl
   }
 }
 
@@ -85,7 +85,8 @@ const actions = {
       //设置axios请求头
       axios.defaults.headers.common['userurl'] = userInfo.backurl
     }
-    
+
+
     return new Promise((resolve, reject) => {
       login({ username: username.trim(), password: password, type: type, captcha: captcha.trim(), code: code}).then(response => {
         const { data } = response;
@@ -118,6 +119,7 @@ const actions = {
             setExp(data.exp,data.exp)
             commit('SET_EXP',data.exp)
           }
+
         }
 
         resolve(response)
@@ -164,21 +166,18 @@ const actions = {
         commit('SET_ROLES', roles)
         commit('SET_USERID', data.id)
         commit('SET_NAME', nickname)
+        console.log("开始设置身份详情")
+        console.log(nickname)
         commit('SET_AVATAR', avatar)
+        console.log(avatar)
         commit('SET_INTRODUCTION', introduction)
         commit('SET_ROLE_ID', role_id)
         //设置用户等级
         commit('SET_USE_TYPE',data.type_id)
         setUseType(data.type_id,state.exp)
-        console.log(data.type_id)
-        console.log(state.exp)
         //设置用户网站
-
-        console.log(123456789)
-        console.log(data.website_id)
         commit('SET_WEBSITEID',data.website_id)
         setWebSiteId(data.website_id,state.exp)
-
         resolve(data)
       }).catch(error => {
         reject(error)

src/utils/auth.js

@@ -6,6 +6,7 @@ const useType = 'use-Type'
 const expTime = 'exp-time'
 const webStieId = 'website-id'
 const TokenKeyTest = 'test-token'
+const loginStatus = 'login-status'
 
 //1.设置token
 export function getToken() {
@@ -60,7 +61,7 @@ export function getExp() {
 
 export function setExp(exp) {
   const expdays = convertSecondsToDays(exp)
-  return Cookies.set(exp, exp, { expires: expdays })
+  return Cookies.set(expTime, exp, { expires: expdays })
 }
 
 export function removeExp() {
@@ -86,6 +87,35 @@ function convertSecondsToDays(seconds) {
   return seconds/(60*60*24); //1天=60秒*60分钟*24小时
 }
 
+//6.设置用户登录状态 - 单点登录 用于判断用户是否用权限进入系统内部
+export function setLoginStatus(status,exp) {
+    const expdays = convertSecondsToDays(exp)
+    return Cookies.set(loginStatus, status, { expires: expdays })
+  }
+
+//6.1 获取用户登录状态
+export function getLoginStatus() {
+  return Cookies.get(loginStatus)
+}
+
+//6.2 删除用户登录状态
+export function removeLoginStatus() {
+  return Cookies.remove(loginStatus)
+}
+
+//6.3 获取登录类型
+export function getLoginType(url) {
+    const match = url.match(/[?&](backurl|userurl)=/);
+    return match ? match[1] : null;
+}
+
+//6.4 获取backurl的值
+export function getBackUrlValue(url) {
+    const regex = /[?&](?:backurl|userurl)=([^&#]+)/;
+    const match = url.match(regex);
+    return match ? decodeURIComponent(match[1]) : null;
+}
+
 // Function to parse hash parameters from the URL
 export function hashParams() {
   const urlString = window.location.href;
@@ -103,10 +133,11 @@ export function hashParams() {
   if (backurl) {
     // Create a URL object to extract the domain
     const backUrlObject = new URL(backurl);
-    return backUrlObject.hostname; // Return only the domain  
+    return backUrlObject.hostname; // Return only the domain     
   }
 
   return null; // Return null if userurl is not present
 }
 
 
+

src/views/login/index.vue

@@ -1,773 +1,804 @@
 <template>
-  <div class="appBox">
-    <div class="mainBox">
-      <div class="leftBox">
-        <!--大标题-->
-        <div class="titleBox">
-          <div class="titleEnglish">Operation Management Platform</div>
-          <div class="titleChinaeseBox">
-            <span class="titleChinasesTop">政讯通<br></span>
-            <span class="titleChinasesBottom">运营管理平台</span>
-          </div>
-        </div>
-        <!--背景颜色-->
-        <div class="yellow" />
-        <div class="blue" />
-        <!--人物图片-->
-        <img src="@/assets/login/Picture.png" class="TitleImg">
-      </div>
-      <div class="rightBox">
-        <!--form登陆框-->
-        <div class="loginFormBox">
-          <!--开始验证表单 start-->
-          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
-            <div class="inputBox greyBg">
-              <img src="@/assets/login/id-card-outline.png" class="inputIcon">
-              <el-form-item prop="username">
-                <el-input
-                  ref="username"
-                  v-model="loginForm.username"
-                  placeholder="请输入手机号"
-                  name="username"
-                  type="text"
-                  tabindex="1"
-                  autocomplete="off"
-                />
-              </el-form-item>
-            </div>
-            <div class="inputBox greyBg">
-              <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
-              <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
-                <el-form-item prop="password">
-                  <el-input
-                    :key="passwordType"
-                    ref="password"
-                    v-model="loginForm.password"
-                    :type="passwordType"
-                    placeholder="请输入密码"
-                    name="password"
-                    tabindex="2"
-                    autocomplete="off"
-                    @keyup.native="checkCapslock"
-                    @blur="capsTooltip = false"
-                    @keyup.enter.native="handleLogin"
-                  />
-                  <span class="show-pwd" @click="showPwd">
-                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-                  </span>
-                </el-form-item>
-              </el-tooltip>
+    <div class="appBox">
+        <div class="mainBox">
+            <div class="leftBox">
+                <!--大标题-->
+                <div class="titleBox">
+                    <div class="titleEnglish">Operation Management Platform</div>
+                    <div class="titleChinaeseBox">
+                        <span class="titleChinasesTop">政讯通<br></span>
+                        <span class="titleChinasesBottom">运营管理平台</span>
+                    </div>
+                </div>
+                <!--背景颜色-->
+                <div class="yellow" />
+                <div class="blue" />
+                <!--人物图片-->
+                <img src="@/assets/login/Picture.png" class="TitleImg">
             </div>
-            <!-- <div class="inputBoxSpecial">
-              <div class="inputBoxLeft greyBg">
-                <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
-                <el-form-item prop="captcha">
-                  <el-input
-                    ref="captcha"
-                    v-model="loginForm.captcha"
-                    placeholder="图形验证码"
-                    name="captcha"
-                    type="text"
-                    tabindex="3"
-                    maxlength="4"
-                    autocomplete="off"
-                  />
-                </el-form-item>
-              </div>
-              <div class="inputBoxRight greyBg">
-                <div class="submitCode">
-                  <img :src="codeImg" class="codeImg" @click="getImgCode">
+            <div class="rightBox">
+                <!--form登陆框-->
+                <div class="loginFormBox">
+                    <!--开始验证表单 start-->
+                    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on"
+                        label-position="left">
+                        <div class="inputBox greyBg">
+                            <img src="@/assets/login/id-card-outline.png" class="inputIcon">
+                            <el-form-item prop="username">
+                                <el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号"
+                                    name="username" type="text" tabindex="1" autocomplete="off" />
+                            </el-form-item>
+                        </div>
+                        <div class="inputBox greyBg">
+                            <img src="@/assets/login/bag-remove-outline.png" class="inputIcon">
+                            <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
+                                <el-form-item prop="password">
+                                    <el-input :key="passwordType" ref="password" v-model="loginForm.password"
+                                        :type="passwordType" placeholder="请输入密码" name="password" tabindex="2"
+                                        autocomplete="off" @keyup.native="checkCapslock" @blur="capsTooltip = false"
+                                        @keyup.enter.native="handleLogin" />
+                                    <span class="show-pwd" @click="showPwd">
+                                        <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+                                    </span>
+                                </el-form-item>
+                            </el-tooltip>
+                        </div>
+                        <!-- <div class="inputBoxSpecial">
+                            <div class="inputBoxLeft greyBg">
+                                <img src="@/assets/login/hardware-chip-outline.png" class="inputIcon">
+                                <el-form-item prop="captcha">
+                                <el-input
+                                    ref="captcha"
+                                    v-model="loginForm.captcha"
+                                    placeholder="图形验证码"
+                                    name="captcha"
+                                    type="text"
+                                    tabindex="3"
+                                    maxlength="4"
+                                    autocomplete="off"
+                                />
+                                </el-form-item>
+                            </div>
+                            <div class="inputBoxRight greyBg">
+                                <div class="submitCode">
+                                <img :src="codeImg" class="codeImg" @click="getImgCode">
+                                </div>
+                                <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
+                            </div>
+                        </div> -->
+                        <el-button :loading="loading" type="primary" class="loginBtn"
+                            @click.native.prevent="singleLogin">
+                            登录
+                        </el-button>
+                        <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
+                    </el-form>
+                    <!--开始验证表单 end-->
                 </div>
-                <div class="reloadBtn" @click="getImgCode">看不清？换一张图</div>
-              </div>
-            </div> -->
-            <el-button :loading="loading" type="primary" class="loginBtn" @click.native.prevent="singleLogin">
-              登录
-            </el-button>
-            <!-- <div class="singleLogin" @click="goBackWebUrl"><i class="el-icon-refresh-right" /> 点此返回原网站</div> -->
-          </el-form>
-          <!--开始验证表单 end-->
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { validUserPhone } from '@/utils/validate'
 import axios from 'axios'
 import BASEURL from '@/utils/baseUrl'
-import { getToken,getTokenTest,removeToken } from '@/utils/auth'
+import { getToken, getTokenTest, removeToken,setLoginStatus,setUserUrl } from '@/utils/auth'
 
 export default {
-  name: 'Login',
-  data() {
-    // 配置验证规则：用于表单验证
-    const validateUsername = (rule, value, callback) => {
-      if (!validUserPhone(value)) {
-        callback(new Error('请输入正确的手机号！'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      if (value.length < 6) {
-        callback(new Error('密码不能低于6位！'))
-      } else {
-        callback()
-      }
-    }
-    const validateCode = (rule, value, callback) => {
-      if (value.length < 4) {
-        callback(new Error('图形验证码不能低于4位！'))
-      } else {
-        callback()
-      }
-    }
-    // 本页基础数据
-    return {
-      loginForm: { // 1.用户使用哪些信息登录
-        username: '', // 15210211200
-        password: '', // 111111
-        type: 1, //1=账号密码登录
-        captcha: '',//验证码图片
-        code:''//验证code
-      },
-      loginRules: { // 2.配置from表单验证规则
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
-        captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
-      },
-      passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
-      capsTooltip: false,
-      loading: false,
-      showDialog: false,
-      redirect: undefined,
-      otherQuery: {},
-      // 图像验证码
-      captchaText: '', // 保存生成的验证码文本
-      captchaInput: '', // 用户输入的验证码
-      codeImg: '' // 图形验证码
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+    name: 'Login',
+    data() {
+        // 配置验证规则：用于表单验证
+        const validateUsername = (rule, value, callback) => {
+            if (!validUserPhone(value)) {
+                callback(new Error('请输入正确的手机号！'))
+            } else {
+                callback()
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  // created() {
-  //   let token = getToken();
-  //   //查询登录状态
-  //   this.$store.dispatch('user/logoutStatus', {"token":token}).then( res => {
-  //     if(res.code==200){
-  //       //token有效，不执行操作
-  //     }else{
-  //       //如果token过期，就清理掉token
-  //       removeToken()
-  //       console.log("token已过期!")
-  //       //this.$message.error(res.message)
-  //     }
-  //   }).catch(() => {
-  //     this.$message.error("查询登录状态失败，请重新登录！")
-  //   })
-  // },
-  mounted() {
-    this.getImgCode()
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        const query = route.query
-        if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+        const validatePassword = (rule, value, callback) => {
+            if (value.length < 6) {
+                callback(new Error('密码不能低于6位！'))
+            } else {
+                callback()
+            }
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    // 检查输入状态
-    checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
-    },
-    // 切换密码框的显示与隐藏
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    // 提交表单并跳转
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          //console.log(this.loginForm)
-          //开始登录
-          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){
-                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
-                })
-              }
-            })
-            .catch(() => {
-              this.loading = false
-            })
-        } else {
-          console.log('表单填写错误！请检查！')
-          return false
+        const validateCode = (rule, value, callback) => {
+            if (value.length < 4) {
+                callback(new Error('图形验证码不能低于4位！'))
+            } else {
+                callback()
+            }
         }
-      })
-    },
-    // 请求图形验证码
-    getImgCode() {
-      const that = this
-      this.$store.dispatch('user/getImgCode').then( res => {
-        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("获取验证码失败，请稍后再试！")
+        // 本页基础数据
+        return {
+            loginForm: { // 1.用户使用哪些信息登录
+                username: '', // 15210211200
+                password: '', // 111111
+                type: 1, //1=账号密码登录
+                captcha: '',//验证码图片
+                code: ''//验证code
+            },
+            loginRules: { // 2.配置from表单验证规则
+                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+                password: [{ required: true, trigger: 'blur', validator: validatePassword }],
+                captcha: [{ required: true, trigger: 'blur', validator: validateCode }]
+            },
+            passwordType: 'password', // 3.密码域默认type 当显示密码的时候改为text
+            capsTooltip: false,
+            loading: false,
+            showDialog: false,
+            redirect: undefined,
+            otherQuery: {},
+            // 图像验证码
+            captchaText: '', // 保存生成的验证码文本
+            captchaInput: '', // 用户输入的验证码
+            codeImg: '' // 图形验证码
         }
-
-      }).catch(() => {
-        this.loading = false
-      })
     },
-    getOtherQuery(query) {
-      return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+    watch: {
+        $route: {
+            handler: function (route) {
+                const query = route.query
+                if (query) {
+                    this.redirect = query.redirect
+                    this.otherQuery = this.getOtherQuery(query)
+                }
+            },
+            immediate: true
         }
-        return acc
-      }, {})
     },
-    // 单点登录 start ---------------------------------------->
-    // 使用字符串操作提取 backurl 参数的值
-    getBackUrl(url) {
-      const params = url.split('?')[1]; // 获取问号后面的部分
-      if (params) {
-        const paramArray = params.split('&'); // 分割参数
-        for (let param of paramArray) {
-          const [key, value] = param.split('='); // 分割键值对
-          if (key === 'backurl') {
-            return decodeURIComponent(value); // 返回解码后的 backurl 值
-          }
-        }
-      }
-      return null; // 如果没有找到 backurl 参数，返回 null
+    // created() {
+    //   let token = getToken();
+    //   //查询登录状态
+    //   this.$store.dispatch('user/logoutStatus', {"token":token}).then( res => {
+    //     if(res.code==200){
+    //       //token有效，不执行操作
+    //     }else{
+    //       //如果token过期，就清理掉token
+    //       removeToken()
+    //       console.log("token已过期!")
+    //       //this.$message.error(res.message)
+    //     }
+    //   }).catch(() => {
+    //     this.$message.error("查询登录状态失败，请重新登录！")
+    //   })
+    // },
+    mounted() {
+        this.getImgCode()
     },
-    //登录分路器 start ---------------------------------------->
-    singleLogin() {
-      //获得当前域名
-      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');
-
-      // 解码backurl
-      const decodedBackurl = decodeURIComponent(backurl);
-      const decodedUserurl = decodeURIComponent(userurl);
-      
-      // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
-      if(hashParams.size==0||system=='/dashboard'){
-        // 获取当前网址
-        const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
-        console.log("当前网址是：" + currentUrl);
-        console.log("执行超级管理员登录！")
-        this.login(1,currentUrl)
-      }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("检查登录链接失败，请从正规渠道登录！")
-          //2025-3-21 不在验证其他可能的值，直接允许登录
-          const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
-          console.log("当前网址是：" + currentUrl);
-          console.log("执行超级管理员登录！")
-          this.login(1,currentUrl)
-
+    watch: {
+        $route: {
+            handler: function (route) {
+                const query = route.query
+                if (query) {
+                    this.redirect = query.redirect
+                    this.otherQuery = this.getOtherQuery(query)
+                }
+            },
+            immediate: true
         }
-      }
     },
-    // 登录分路器 end ---------------------------------------->
-    // 登录 start ---------------------------------------->
-    login(type,url){
-
-      console.log(BASEURL.WebCloginUrl)
-
-      //超级管理员登录
-      if(type==1){
-        // 获取当前页面的 URL
-        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&&res.token!=''){
-                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 if(res.token==''||res.token==null||res.token==undefined){
-                this.$message({
-                  type:'error',
-                  message:"登录失败！未能正确获取用户token，请重试！"
-                })
-              }
+    methods: {
+        // 检查输入状态
+        checkCapslock(e) {
+            const { key } = e
+            this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
+        },
+        // 切换密码框的显示与隐藏
+        showPwd() {
+            if (this.passwordType === 'password') {
+                this.passwordType = ''
+            } else {
+                this.passwordType = 'password'
+            }
+            this.$nextTick(() => {
+                this.$refs.password.focus()
             })
-          }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 => {
-                this.loading = false
-                console.log(res)
-                if(res.code==0){
-                  this.$message({
-                    type:'error',
-                    message:res.message
-                  })
-                }else if(res.code==200&&res.token!=''){
-                  const currentUrl = window.location.href;
-                  const backurlValue = this.getBackUrl(currentUrl);
-                  console.log("单点登录成功，开始启动跳转！")
-                  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 = BASEURL.webClogBackUrL + '?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
-
-                }else if(res.code!=0&&res.code!=200){
-                  this.$message({
-                    type:'error',
-                    message:res.message
-                  })
+        },
+        // 提交表单并跳转
+        handleLogin() {
+            this.$refs.loginForm.validate(valid => {
+                if (valid) {
+                    //console.log(this.loginForm)
+                    //开始登录
+                    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) {
+                                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
+                                })
+                            }
+                        })
+                        .catch(() => {
+                            this.loading = false
+                        })
+                } else {
+                    console.log('表单填写错误！请检查！')
+                    return false
+                }
+            })
+        },
+        // 请求图形验证码
+        getImgCode() {
+            const that = this
+            this.$store.dispatch('user/getImgCode').then(res => {
+                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(() => {
+
+            }).catch(() => {
                 this.loading = false
-              })
-          } else {
-            console.log('表单填写错误！请检查！')
-            return false
-          }
-        })
-
-      }
-      //会员登录
-      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||res.code==-1){
-                this.$message({
-                  type:'error',
-                  message:res.message
+            })
+        },
+        getOtherQuery(query) {
+            return Object.keys(query).reduce((acc, cur) => {
+                if (cur !== 'redirect') {
+                    acc[cur] = query[cur]
+                }
+                return acc
+            }, {})
+        },
+        // 单点登录 start ---------------------------------------->
+        // 使用字符串操作提取 backurl 参数的值
+        getBackUrl(url) {
+            const params = url.split('?')[1]; // 获取问号后面的部分
+            if (params) {
+                const paramArray = params.split('&'); // 分割参数
+                for (let param of paramArray) {
+                    const [key, value] = param.split('='); // 分割键值对
+                    if (key === 'backurl') {
+                        return decodeURIComponent(value); // 返回解码后的 backurl 值
+                    }
+                }
+            }
+            return null; // 如果没有找到 backurl 参数，返回 null
+        },
+        //登录分路器 start ---------------------------------------->
+        singleLogin() {
+            //获得当前域名
+            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');
+
+            // 解码backurl
+            const decodedBackurl = decodeURIComponent(backurl);
+            const decodedUserurl = decodeURIComponent(userurl);
+
+            // 第一种情况， 不含有backUrl或者userUrl 说明登录者是超级管理员
+            if (hashParams.size == 0 || system == '/dashboard') {
+                // 获取当前网址
+                const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
+                console.log("当前网址是：" + currentUrl);
+                console.log("执行超级管理员登录！")
+                this.login(1, currentUrl)
+                setUserUrl(currentUrl, 86400)
+            } 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("检查登录链接失败，请从正规渠道登录！")
+                    //2025-3-21 不在验证其他可能的值，直接允许登录
+                    const currentUrl = window.location.origin.replace(/^https?:\/\//, '').split('/')[0];
+                    console.log("当前网址是：" + currentUrl);
+                    console.log("执行超级管理员登录！")
+                    this.login(1, currentUrl)
+                    setUserUrl(currentUrl, 86400)
+                }
+            }
+        },
+        // 登录分路器 end ---------------------------------------->
+        // 登录 start ---------------------------------------->
+        login(type, url) {
+
+            console.log(BASEURL.WebCloginUrl)
+
+            //超级管理员登录
+            if (type == 1) {
+                if (url == null || url == undefined || url == '') {
+                    this.loginForm.userurl = "localhost"
+                } else {
+                    // 获取当前页面的 URL
+                    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 && res.token != '') {
+                                this.sendUrlServ()
+                                console.log("登录成功，将跳转至详情页面222！")
+                                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 if (res.token == '' || res.token == null || res.token == undefined) {
+                                this.$message({
+                                    type: 'error',
+                                    message: "登录失败！未能正确获取用户token，请重试！"
+                                })
+                            }
+                        })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false;
+                    }
                 })
-              }else if(res.code==200&&res.token!=''){
-                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
+            }
+            //单点登录
+            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 => {
+                                this.loading = false
+                                console.log(res)
+                                if (res.code == 0) {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.message
+                                    })
+                                } else if (res.code == 200 && res.token != '') {
+                                    const currentUrl = window.location.href;
+                                    const backurlValue = this.getBackUrl(currentUrl);
+                                    console.log("单点登录成功，开始启动跳转！")
+                                    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 = BASEURL.webClogBackUrL + '?backurl=' + backurlValue + '&token=' + res.data.token; //pre返回地址
+                                    //我
+                                    window.location.href = backurlValue + '?backurl=' + backurlValue + '&admintoken=' + res.data.token; //pre返回地址
+
+                                } else if (res.code != 0 && res.code != 200) {
+                                    this.$message({
+                                        type: 'error',
+                                        message: res.message
+                                    })
+                                }
+                            })
+                            .catch(() => {
+                                this.loading = false
+                            })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false
+                    }
                 })
-              }else if(res.token==''||res.token==null||res.token==undefined){
-                this.$message({
-                  type:'error',
-                  message:"登录失败！未能正确获取用户token，请重试！"
+
+            }
+            //会员登录
+            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 || res.code == -1) {
+                                this.$message({
+                                    type: 'error',
+                                    message: res.message
+                                })
+                            } else if (res.code == 200 && res.token != '') {
+                                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 if (res.token == '' || res.token == null || res.token == undefined) {
+                                this.$message({
+                                    type: 'error',
+                                    message: "登录失败！未能正确获取用户token，请重试！"
+                                })
+                            }
+
+                        })
+                    } else {
+                        console.log('表单填写错误！请检查！')
+                        return false;
+                    }
                 })
-              }
+            }
+        },
+        // 登录 end ---------------------------------------->
 
-            })
-          }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(BASEURL.WebCloginUrl,{params: {
-      //     token: this.$store.state.user.token
-      // }}).then(res => {
-      //   console.log(res)
-      // }).catch(err => {
-      //   console.log(err)
-      // });
-
-      // 新做的，待替换
-      // this.$store.dispatch('user/loginapi', {
-      //   token: this.$store.state.user.token
-      // }).then(res => {
-      //   console.log("单点登录成功！")
-      // }).catch(err => {
-      //   console.log(err)
-      // })
+        // 返回原网站 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(BASEURL.WebCloginUrl,{params: {
+            //     token: this.$store.state.user.token
+            // }}).then(res => {
+            //   console.log(res)
+            // }).catch(err => {
+            //   console.log(err)
+            // });
+
+            // 新做的，待替换
+            // this.$store.dispatch('user/loginapi', {
+            //   token: this.$store.state.user.token
+            // }).then(res => {
+            //   console.log("单点登录成功！")
+            // }).catch(err => {
+            //   console.log(err)
+            // })
+        },
     }
-    // 返回原网站 end---------------------------------------->
-  }
 }
 </script>
 
 <style scoped lang="less">
-  .singleLogin {
+.singleLogin {
     font-size: 18px;
     color: #666;
     cursor: pointer;
     margin-top: 30px;
     width: 400px;
     text-align: center;
-  }
-  /*整体盒子模型 使用display flex布局保持中间主体始终居中*/
-  .appBox{
+}
+
+/*整体盒子模型 使用display flex布局保持中间主体始终居中*/
+.appBox {
     clear: both;
     width: 100%;
     height: 100%;
-    display:flex;
+    display: flex;
     align-items: center;
+
     /*中央盒子模型 在1920x1080下将会保持恒定的显示效果 低于这个分辨率左侧将会自动收缩*/
     .mainBox {
-      width: 100%;
-      max-width: 1920px;
-      display:flex;
-      justify-content: center;
-      margin: 0 auto;
-      .leftBox{
-        width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
-        max-width: 1057px;
-        margin-right: 50px;
-        max-height:585px;
-        height: 100vh;//自适应全屏高度
-        position: relative;
-      }
-      .rightBox{
-        max-width: 400px;
-        height:360px;
-        position: relative;
-      }
+        width: 100%;
+        max-width: 1920px;
+        display: flex;
+        justify-content: center;
+        margin: 0 auto;
+
+        .leftBox {
+            width: 55%; //左侧自动收缩 最低1057 最高1920 1057/1920=55%
+            max-width: 1057px;
+            margin-right: 50px;
+            max-height: 585px;
+            height: 100vh; //自适应全屏高度
+            position: relative;
+        }
+
+        .rightBox {
+            max-width: 400px;
+            height: 360px;
+            position: relative;
+        }
     }
 
     /*中央左侧main内容*/
 
     /*1.标题文字 start*/
     .titleBox {
-      width: 516px;
-      height: 280px;
-      position: absolute;
-      z-index:9999;
-      top:5%;
-      left:2%;
-      .titleEnglish{
-        left: 0px;
-        top: 238px;
-        position: absolute;
-        color: #333333;
-        font-size: 32px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        word-wrap: break-word
-      }
-      .titleChinaeseBox{
-        left: 0px;
-        top: 0px;
+        width: 516px;
+        height: 280px;
         position: absolute;
-        .titleChinasesTop{
-          color: #5570F1;
-          font-size: 86px;
-          font-family: Microsoft YaHei;
-          font-weight: 700;
-          word-wrap: break-word
+        z-index: 9999;
+        top: 5%;
+        left: 2%;
+
+        .titleEnglish {
+            left: 0px;
+            top: 238px;
+            position: absolute;
+            color: #333333;
+            font-size: 32px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            word-wrap: break-word
         }
-        .titleChinasesBottom{
-          color: #333333;
-          font-size: 86px;
-          font-family: Microsoft YaHei;
-          font-weight: 700;
-          word-wrap: break-word
+
+        .titleChinaeseBox {
+            left: 0px;
+            top: 0px;
+            position: absolute;
+
+            .titleChinasesTop {
+                color: #5570F1;
+                font-size: 86px;
+                font-family: Microsoft YaHei;
+                font-weight: 700;
+                word-wrap: break-word
+            }
+
+            .titleChinasesBottom {
+                color: #333333;
+                font-size: 86px;
+                font-family: Microsoft YaHei;
+                font-weight: 700;
+                word-wrap: break-word
+            }
         }
-      }
     }
+
     /*标题文字 end*/
 
     /*2.背景颜色 start*/
-    .yellow,.blue {
-      width: 226px;
-      height: 226px;
-      position: absolute;
+    .yellow,
+    .blue {
+        width: 226px;
+        height: 226px;
+        position: absolute;
     }
-    .yellow{
-      z-index:1000;
-      opacity: 0.45;
-      top:0;
-      left:0;
-      background: #DDA82A;
-      border-radius: 50%;
-      filter: blur(120px)
+
+    .yellow {
+        z-index: 1000;
+        opacity: 0.45;
+        top: 0;
+        left: 0;
+        background: #DDA82A;
+        border-radius: 50%;
+        filter: blur(120px)
     }
-    .blue{
-      z-index:1001;
-      bottom:15%;
-      left:20%;
-      background: #4461F2;
-      border-radius: 50%;
-      filter: blur(150px)
+
+    .blue {
+        z-index: 1001;
+        bottom: 15%;
+        left: 20%;
+        background: #4461F2;
+        border-radius: 50%;
+        filter: blur(150px)
     }
+
     /*背景颜色 end*/
 
     /*3.背景图 start*/
     .TitleImg {
-      display:block;
-      position: absolute;
-      z-index:1100;
-      right:0;
-      bottom:0;
-      @media (max-width: 1366px) and (max-height: 768px) {
-        transform: scale(0.7); //稍微缩小
-      }
+        display: block;
+        position: absolute;
+        z-index: 1100;
+        right: 0;
+        bottom: 0;
+
+        @media (max-width: 1366px) and (max-height: 768px) {
+            transform: scale(0.7); //稍微缩小
+        }
     }
+
     /*背景图 end*/
 
     /*中央右侧main内容*/
     /*登录框 start*/
     .loginFormBox {
-      margin-top:15%;
-      .inputBox {
-        margin-bottom: 30px;
-        .inputIcon {
-          width: 24px;
-          height: 24px;
-          margin: 0 20px 0 20px;
+        margin-top: 15%;
+
+        .inputBox {
+            margin-bottom: 30px;
+
+            .inputIcon {
+                width: 24px;
+                height: 24px;
+                margin: 0 20px 0 20px;
+            }
+
+            .inputIconSmall {
+                width: 18px;
+                height: 18px;
+            }
         }
-        .inputIconSmall {
-          width: 18px;
-          height: 18px;
+
+        .inputBoxSpecial {
+            justify-content: space-between;
+            margin-bottom: 80px;
         }
-      }
-      .inputBoxSpecial {
-        justify-content: space-between;
-        margin-bottom: 80px;
-      }
-      .inputBox,.inputBoxSpecial{
-        height: 52px;
-        width: 400px;
-        box-sizing: border-box;
-        align-items: center;
-        display:flex;
-        input {
-          border:0;
-          background: transparent;
-          font-size: 18x;
+
+        .inputBox,
+        .inputBoxSpecial {
+            height: 52px;
+            width: 400px;
+            box-sizing: border-box;
+            align-items: center;
+            display: flex;
+
+            input {
+                border: 0;
+                background: transparent;
+                font-size: 18x;
+            }
+
+            input:focus {
+                outline: none;
+            }
         }
-        input:focus {
-          outline: none;
+
+        .greyBg {
+            background: rgba(239, 241, 249, 0.60);
+            border-radius: 8px;
         }
-      }
-      .greyBg {
-        background: rgba(239, 241, 249, 0.60);
-        border-radius: 8px;
-      }
-      .inputBoxLeft {
-        width:250px;
-        height: 52px;
-        box-sizing: border-box;
-        align-items: center;
-        display:flex;
-        input {
-          width: 150px;
-          font-size: 16px;
+
+        .inputBoxLeft {
+            width: 250px;
+            height: 52px;
+            box-sizing: border-box;
+            align-items: center;
+            display: flex;
+
+            input {
+                width: 150px;
+                font-size: 16px;
+            }
+
+            .inputIcon {
+                width: 24px;
+                height: 24px;
+                margin: 0 20px 0 20px;
+            }
         }
-        .inputIcon {
-          width: 24px;
-          height: 24px;
-          margin: 0 20px 0 20px;
+
+        .inputBoxRight {
+            width: 140px;
+            height: 52px;
+            position: relative;
+
+            .submitCode {
+                height: 52px;
+                box-sizing: border-box;
+                padding-top: 5px;
+                padding-left: 10px;
+                cursor: pointer;
+
+                .codeImg {
+                    display: block;
+                    width: 120px;
+                    height: 42px;
+                }
+            }
         }
-      }
-      .inputBoxRight {
-        width:140px;
-        height: 52px;
-        position: relative;
-        .submitCode {
-          height: 52px;
-          box-sizing: border-box;
-          padding-top: 5px;
-          padding-left: 10px;
-          cursor:pointer;
-          .codeImg{
-            display: block;
-            width: 120px;
-            height: 42px;
-          }
+
+        .reloadBtn {
+            color: #5570F1;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            word-wrap: break-word;
+            position: absolute;
+            bottom: -20px;
+            right: 0;
+            cursor: pointer
+        }
+
+        .loginBtn {
+            width: 400px;
+            height: 58px;
+            background: #5570F1;
+            box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
+            border-radius: 12px;
+            font-size: 24px;
+            color: #fff;
+            border: 0;
         }
-      }
-      .reloadBtn {
-        color: #5570F1;
-        font-size: 12px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        word-wrap: break-word;
-        position: absolute;
-        bottom: -20px;
-        right: 0;
-        cursor:pointer
-      }
-      .loginBtn {
-        width: 400px;
-        height: 58px;
-        background: #5570F1;
-        box-shadow: 0px 4px 19px rgba(85, 112, 241, 0.40);
-        border-radius: 12px;
-        font-size:24px;
-        color:#fff;
-        border:0;
-      }
 
 
     }
-  }
+}
 
-  /*验证码*/
-  .captcha-img {
+/*验证码*/
+.captcha-img {
     cursor: pointer;
     width: 120px;
-    height: 40px; /* 调整验证码图片大小 */
-  }
-  .show-pwd{
+    height: 40px;
+    /* 调整验证码图片大小 */
+}
+
+.show-pwd {
     margin-left: 30px;
-  }
-  /*登录框 end*/
+}
 
-  /*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
-  /*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/
+/*登录框 end*/
 
-  /deep/ .el-input__inner {
+/*此处修改了element-ui中的部分内置样式，但是通过css-scope可以保证不会污染到全局*/
+/*在index中使用deep或者>>>深度选择器来修改el-input的默认样式*/
+
+/deep/ .el-input__inner {
     background: transparent;
-    width:100%;
+    width: 100%;
     border: 0;
     //border:0
-  }
-  /deep/ .el-form-item {
+}
+
+/deep/ .el-form-item {
     margin-bottom: 0;
-  }
-  /deep/ .el-form-item__content {
+}
+
+/deep/ .el-form-item__content {
     display: flex;
     width: 300px;
-  }
-  /deep/ .el-form-item__error {
+}
+
+/deep/ .el-form-item__error {
     bottom: -34px;
-    left:15px;
+    left: 15px;
     line-height: 30px;
-  }
+}
 </style>

src/views/login/no-permission.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="massageBox">
+        <div class="massageImg"><img src="@/assets/login/iconContainer.png"></div>
+        <div class="massageTitle">暂无权限登录</div>
+        <div class="massageText">请联系管理员或客服人员操作</div>
+        <div class="massageBtn">
+            <el-button type="primary" @click="goBack">返回原网站</el-button>
+        </div>
+        <!-- <div class="massageBtn">
+            <el-button  @click="goLogin">管理员登录</el-button>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import { getUserUrl,setUserUrl } from '@/utils/auth'
+export default {
+    name: 'NoPermission',
+    data() {
+        return {
+           
+        }
+    },
+    methods: {
+        goBack() {
+            //获取来源网站地址
+            let url = getUserUrl();
+            //返回来源网站
+            window.location.href = "http://" + url;
+        },
+        // goLogin() {
+        //     //设置来源网站为当前域名
+        //     setUserUrl(window.location.host,86400);
+        //     //跳转管理员登录页面
+        //     this.$router.push('/login');
+        // }
+    }
+}
+</script>
+
+<style scoped>
+    .massageBox {
+        margin: 0 auto;
+        width: 280px;
+        box-sizing: border-box;
+        padding-top: 150px;
+        .massageTitle {
+            color: #333;
+            font-weight: bold;
+            font-size: 20px;
+            text-align: center;
+            padding-bottom: 12px;
+        }
+        .massageText {
+            color: #8B8D97;
+            font-size: 14px;
+            text-align: center;
+            padding-bottom: 30px;
+        }
+        .massageImg {
+            padding-bottom: 40px;
+            img {
+                display: block;
+                margin: 0 auto;
+            }
+        }
+        .massageBtn {
+            text-align: center;
+            padding-bottom: 20px;
+            button {
+                width: 180px;
+                height: 44px;
+            }
+        }
+    }
+</style>