• vue-element-admin改造步骤


    一. 改为放温暖单点登录页面方式登录;

    1. src/store/modules/user.js 增加setSSOUserToken方法

    const actions = {
      // user login
      login({ commit }, userInfo) {
        const { username, password } = userInfo
        return new Promise((resolve, reject) => {
          login({ username: username.trim(), password: password }).then(response => {
            const { data } = response
            commit('SET_TOKEN', data.token)
            setToken(data.token)
            resolve()
          }).catch(error => {
            reject(error)
          })
        })
      },
    
      setSSOUserToken({ commit }, ssouserToken) {
        commit('SET_TOKEN', ssouserToken )
        setToken(ssouserToken)
      }
    }

    2. src/permission.js 修改判定条件,跳转至单点登录页面,并且截取返回的url,获取token,处理url,跳转至目标页面

    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, setToken } from '@/utils/auth' // get token from cookie
    import getPageTitle from '@/utils/get-page-title'
    import { getQueryString, param2Obj, getQueryObject } from '@/utils'
    
    NProgress.configure({ showSpinner: false }) // NProgress Configuration
    
    const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
    
    router.beforeEach(async(to, from, next) => {
      // start progress bar
      NProgress.start()
    
      // set page title
      document.title = getPageTitle(to.meta.title)
    
      // determine whether the user has logged in
      const hasToken = getToken()
    
      if (hasToken) {
        if (to.path === '/login') {
          // if is logged in, redirect to the home page
          next({ path: '/' })
          NProgress.done()
        } 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 })
            } 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()
            }
          }
        }
      } else {
        /* has no token*/
    
        if (whiteList.indexOf(to.path) !== -1) {
          // in the free login whitelist, go directly
          next()
        } else {
          // other pages that do not have permission to access are redirected to the login page.
          // next(`/login?redirect=${to.path}`)
          // NProgress.done()
          // 获取token
          const token = getQueryString('SSOUserToken')
          const token2 = param2Obj(window.location.href)
          const token3 = getQueryObject(window.location.href)
          if (token) {
            store.dispatch('user/setSSOUserToken', decodeURIComponent(token))
            // setToken(decodeURIComponent(token))
            window.location.href = window.location.href.split("?")[0]
          } else {
            // token不存在,跳转单点登录页面
            window.location.href = 'https://erpportal.ztzs.cn/sso/account/CheckToken/?LoginCallback=' + window.location.href
          }
    
        }
      }
    })
    
    router.afterEach(() => {
      // finish progress bar
      NProgress.done()
    })
  • 相关阅读:
    笔记-JavaWeb学习之旅13
    笔记-JavaWeb学习之旅12
    笔记-JavaWeb学习之旅11
    笔记-JavaWeb学习之旅10
    EF Core CodeFirst
    C#泛型
    软件工程笔记(二)
    第一章 软件工程概述
    软件工程笔记(一)
    MySql笔记(二)
  • 原文地址:https://www.cnblogs.com/hwubin5/p/11914958.html
Copyright © 2020-2023  润新知