修改单点登登录功能

修改单点登登录功能

src/layout/components/Navbar.vue

@@ -286,12 +286,15 @@ 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();
       });
 
       removeLoginStatus();

src/permission.js

@@ -1,132 +1,117 @@
-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, setLoginStatus, getLoginStatus } 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 } from '@/utils/auth' //设置cookie的方法
+import URL from '@/utils/baseUrl'; //获得请求路径
+import { getInfo } from '@/api/user' //获得用户信息
+//2.引入单点登录需要的方法 end ---------------------------------------->
 
+//3.设置路由守卫 start ---------------------------------------->
 router.beforeEach(async (to, from, next) => {
-    // start progress bar
+    //3.1 当路由开始改变时，加载进度条
     NProgress.start()
-
-    // set page title
+    //3.2 设置系统标题
     document.title = getPageTitle(to.meta.title)
-
-    // determine whether the user has logged in
+    //3.3 检查cookie中的token是否已经存在
     const hasToken = getToken()
-    //检测token的状态
-    await store.dispatch('user/logoutStatus')
-
-    //获得用户操作管理系统的权限
-    const loginStatus = getLoginStatus()
-
 
+    //3.4 如果token存在
     if (hasToken) {
-        if (loginStatus == 0 || loginStatus == null || loginStatus == undefined) {
-            if (whiteList.indexOf(to.path) !== -1) {
-                console.log("用户没有权限操作管理系统，使其保持在登录页面");
-                next();
+        //3.4.1 如果有token，而且是在登录页面
+        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) {
+                console.log("####")
+                //每次返回login的时候都获取一下用户类型和网站id
+                setUseType(userInfo.data.type_id, 86400)
+                setWebSiteId(userInfo.data.website_id, 86400)
+                next({ path: '/' })
+                NProgress.done() 
             } else {
-                next(`/login?redirect=${to.path}`);
-                NProgress.done();
+                if(userInfo.code == -1){
+                    next({ path: '/' })
+                    NProgress.done()
+                }else{
+                    next({ path: '/' })
+                    NProgress.done()
+                }
             }
         } else {
-            if (to.path === '/login') {
-                // Retrieve userurl
-                const userurl = hashParams();
-                if (userurl) {
-                    setUserUrl(userurl, 86400)
-                }
+            //3.4.2 如果有token，但是没在登录页面
+            const hasRoles = store.getters.roles && store.getters.roles.length > 0
+            //此时分为两种情况，一种是用户通过路由访问，一种是用户从url直接访问（刷新）时执行
+            if (hasRoles) {
                 const userInfo = await getInfo();
-                console.log("User Info:", userInfo);
-                if (userInfo.code === 200) {
-                    console.log("####")
-                    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 {
-                    if(userInfo.code == -1){
-                        setLoginStatus(0,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(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()
                 }
-                // 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);
-                        console.log("33333333333")
-                    } catch (error) {
-                        console.log("444444444444")
-                        // 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()
-                    }
+                //页面刷新的时候执行
+                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*/
+        //3.5 如果token不存在
         if (whiteList.indexOf(to.path) !== -1) {
             const userurl = hashParams();
             if(userurl){
-            setUserUrl(userurl, 86400) 
+                //更新backurl
+                setUserUrl(userurl, 86400) 
+            }else{
+                //设置来源网站为当前域名
+                setUserUrl(window.location.host,86400);
             }
-            // in the free login whitelist, go directly
             next()
         } else {
-            const userType = getUseType()
-            if(userType==10000){
-            next(`/login?redirect=${to.path}`)
+            next(`/login`)
             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;
-            }
-            next(`/login?backurl=${url}`)
-            NProgress.done()
-            setUserUrl(userurl, 86400)
-            }
         }
     }
 })
 
 router.afterEach(() => {
-    // finish progress bar
+    //路由改变完毕后，结束进度条
     NProgress.done()
-})
+})
+//3.设置路由守卫 end ---------------------------------------->

src/router/index.js

@@ -62,6 +62,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/getters.js

@@ -15,7 +15,6 @@ const getters = {
   userurl: state => state.user.userurl,
   usertype: state => state.user.usertype,
   exp: state => state.user.exp,
-  websiteid: state => state.user.websiteid,
-  loginStatus: state => state.user.loginStatus
+  websiteid: state => state.user.websiteid
 }
 export default getters;

src/store/modules/user.js

@@ -1,7 +1,8 @@
 import { login, logout, getInfo, getMenu ,getImgCode,updateUserAvatarNickname,loginapi,logoutapi,logoutStatus} from '@/api/user'
-import { getToken, setToken, setUserUrl, removeToken ,removUserUrl,getUserUrl,getUseType,removUseType,setUseType,getExp,setExp,removeExp,setWebSiteId,getWebSiteId,removeWebSiteId,setLoginStatus,getLoginStatus,removeLoginStatus } from '@/utils/auth'
+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(),
@@ -15,7 +16,6 @@ const state = {
   usertype: getUseType(),
   exp:getExp(),
   websiteid:getWebSiteId(),
-  loginStatus:getLoginStatus(),//用户是否有权限进入管理后台 1=允许 0=不允许
 }
 
 const mutations = {
@@ -52,25 +52,21 @@ const mutations = {
   SET_WEBSITEID: (state, websiteid) => {
     state.websiteid = websiteid
   },
-  SET_LOGIN_STATUS: (state, loginStatus) => {
-    state.loginStatus = loginStatus
-  },
   // 退出登录逻辑直接放在 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();
+    removUserUrl();
     resetRouter();
-    //removUseType();
-    //退出登录跳转回原网站
-    window.location.href = "http://" + state.userurl
+    removUseType();
   }
 }
 
@@ -89,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;
@@ -108,9 +105,6 @@ const actions = {
             //储存过期时间
             setExp(data.exp,data.exp)
             commit('SET_EXP',data.exp)
-            //用户有权限登录
-            setLoginStatus(1,data.exp)
-            commit('SET_LOGIN_STATUS',1)
           }
 
           //会员登录进入系统，储存所属url
@@ -124,10 +118,8 @@ const actions = {
             //储存过期时间
             setExp(data.exp,data.exp)
             commit('SET_EXP',data.exp)
-            //用户有权限登录
-            setLoginStatus(1,data.exp)
-            commit('SET_LOGIN_STATUS',0)
           }
+
         }
 
         resolve(response)
@@ -174,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

@@ -61,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() {

src/views/login/index.vue

@@ -76,19 +76,6 @@
                 </div>
             </div>
         </div>
-        <div v-if="this.$store.getters.loginStatus == 0" class="loginStatusBox">
-            <div class="loginStatus">
-                <div class="loginStatusTip">提示</div>
-                <div class="loginStatusImgBox">
-                    <img src="@/assets/login/iconContainer.png">
-                </div>
-                <div class="loginStatusTitle">暂无权限登录</div>
-                <div class="loginStatusText">请联系管理员或客服人员操作</div>
-                <div class="loginStatusBtnBox">
-                    <el-button type="primary" @click="closeWindow">关闭</el-button>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
 
@@ -96,7 +83,7 @@
 import { validUserPhone } from '@/utils/validate'
 import axios from 'axios'
 import BASEURL from '@/utils/baseUrl'
-import { getToken, getTokenTest, removeToken,setLoginStatus } from '@/utils/auth'
+import { getToken, getTokenTest, removeToken,setLoginStatus,setUserUrl } from '@/utils/auth'
 
 export default {
     name: 'Login',
@@ -314,6 +301,7 @@ export default {
                 console.log("当前网址是：" + currentUrl);
                 console.log("执行超级管理员登录！")
                 this.login(1, currentUrl)
+                setUserUrl(currentUrl, 86400)
             } else {
                 // 第二种情况，含有backurl 说明是单点登录
                 if (backurl != null) {
@@ -341,7 +329,7 @@ export default {
                     console.log("当前网址是：" + currentUrl);
                     console.log("执行超级管理员登录！")
                     this.login(1, currentUrl)
-
+                    setUserUrl(currentUrl, 86400)
                 }
             }
         },
@@ -373,7 +361,7 @@ export default {
                                 })
                             } else if (res.code == 200 && res.token != '') {
                                 this.sendUrlServ()
-                                console.log("登录成功，将跳转至详情页面！")
+                                console.log("登录成功，将跳转至详情页面222！")
                                 this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
                             } else if (res.code != 0 && res.code != 200) {
                                 this.$message({
@@ -523,11 +511,6 @@ export default {
             //   console.log(err)
             // })
         },
-        // 返回原网站 end---------------------------------------->
-        closeWindow() {
-            this.$store.commit('user/SET_LOGIN_STATUS', 1)
-            setLoginStatus(1, 86400) 
-        }
     }
 }
 </script>
@@ -818,58 +801,4 @@ export default {
     left: 15px;
     line-height: 30px;
 }
-
-
-/*用户登录权限检测*/
-.loginStatusBox {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 9999;
-    .loginStatus {
-        width: 600px;
-        height: 670px;
-        background: #fff;
-        border-radius: 12px;
-        box-sizing: border-box;
-        padding-top: 32px;
-        margin: 0 auto;
-        margin-top: 100px;
-        .loginStatusTip {
-            border-left: 3px solid #5570F1;
-            padding-left: 22px;
-            color: #333;
-            margin-bottom: 125px;
-        }
-        .loginStatusImgBox {
-            text-align: center;
-            margin-bottom: 40px;
-            img {
-                width: 140px;
-                height: 140px;
-            }
-        }
-        .loginStatusTitle {
-            font-size: 20px;
-            color: #333;
-            margin-bottom: 12px;
-            text-align: center;
-        }
-        .loginStatusText {
-            font-size: 14px;
-            color:#8B8D97;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .loginStatusBtnBox {
-            text-align: center;
-            button {
-                width: 180px;
-                height: 44px;
-            }
-        }
-    }
-    
-}
 </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>