Browse Source

完善登录

luyanan 6 years ago
parent
commit
f300dfb4d4

+ 8 - 17
src/components/Marqueebox/index.vue

12
    <el-menu class="message-box" mode="horizontal">
12
    <el-menu class="message-box" mode="horizontal">
13
      <div class="marquee_box">
13
      <div class="marquee_box">
14
        <span class="tit">系统公告:</span>
14
        <span class="tit">系统公告:</span>
15
        <div ref="rollul" class="marquee_text" :class="{anim:animate}">
16
          {{formNotice.desc}}
17
        </div>
15
        <el-tooltip :content="formNotice.desc" placement="bottom-end" effect="dark">
16
          <div class="marquee_text">{{formNotice.desc}}</div>
17
        </el-tooltip>
18
        <span class="btn-span" v-if="isShow" @click="openNoticeDialog">设置</span>
18
        <span class="btn-span" v-if="isShow" @click="openNoticeDialog">设置</span>
19
      </div>
19
      </div>
20
    </el-menu>
20
    </el-menu>
46
  },
46
  },
47
  created() {
47
  created() {
48
    this.getNotice()
48
    this.getNotice()
49
    setInterval(this.scroll, 3000)
50
  },
49
  },
51
  methods: {
50
  methods: {
52
    getNotice() {
51
    getNotice() {
75
          return false
74
          return false
76
        }
75
        }
77
      })
76
      })
78
    },
79
    scroll() {
80
      // const con1 = this.$refs.rollul
81
      // con1.style.marginTop = '0px'
82
      // this.animate = !this.animate
83
      // var that = this
84
      // setTimeout(() => {
85
      //   con1.style.marginTop = '-50px'
86
      //   that.animate = !that.animate
87
      // }, 1000)
88
    }
77
    }
89
  }
78
  }
90
}
79
}
109
      line-height: 50px;
98
      line-height: 50px;
110
      position:absolute;
99
      position:absolute;
111
      top:0;
100
      top:0;
112
      padding-left:68px;
113
      padding-right: 80px;
114
      width:100%;
101
      padding-left: 0;
102
      left:68px;
103
      right:80px;
115
      box-sizing: border-box;
104
      box-sizing: border-box;
105
      text-overflow: ellipsis;
106
      white-space:nowrap;
116
      overflow: hidden;
107
      overflow: hidden;
117
    }
108
    }
118
    .btn-span{
109
    .btn-span{

+ 20 - 18
src/permission.js

3
import NProgress from 'nprogress' // Progress 进度条
3
import NProgress from 'nprogress' // Progress 进度条
4
import 'nprogress/nprogress.css'// Progress 进度条样式
4
import 'nprogress/nprogress.css'// Progress 进度条样式
5
import { Message } from 'element-ui'
5
import { Message } from 'element-ui'
6
import { getSession, getIfLoginUser } from '@/utils/auth' // 验权
6
import { getCookiesName } from '@/utils/auth' // 验权
7
7
8
NProgress.configure({ showSpinner: false })// NProgress Configuration
8
NProgress.configure({ showSpinner: false })// NProgress Configuration
9
9
10
function hasPermission(roles, permissionRoles) {
11
  if (roles.indexOf('1') >= 0) return true // admin permission passed directly
12
  if (!permissionRoles) return true
13
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
14
}
15
10
const whiteList = ['/login', '/findPwd'] // 不重定向白名单
16
const whiteList = ['/login', '/findPwd'] // 不重定向白名单
11
getIfLoginUser()
12
router.beforeEach((to, from, next) => {
17
router.beforeEach((to, from, next) => {
13
  NProgress.start()
18
  NProgress.start()
14
  setTimeout(() => {
19
  setTimeout(() => {
15
    console.log(getSession())
16
    console.log(store.getters.logins)
17
    if (store.getters.logins) {
20
    if (getCookiesName()) {
18
      if (to.path === '/login') {
21
      if (to.path === '/login') {
22
        console.log(3333)
19
        next({ path: '/' })
23
        next({ path: '/' })
20
        NProgress.done()
24
        NProgress.done()
21
        console.log(1111)
22
      } else {
25
      } else {
23
        if (store.getters.roles.length === 0) {
24
          console.log(2222)
25
          store.dispatch('GetUserInfo').then(res => { // 拉取用户信息
26
            const dataS = res.data
27
            const roles = [dataS.type.toString()]
26
        if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
27
          store.dispatch('GetUserInfo').then(res => { // 拉取user_info
28
            const roles = [res.data.type.toString()]
28
            store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
29
            store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
29
              router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
30
              router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
30
              next({ ...to, replace: true })
31
              next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
31
            })
32
            })
32
          }).catch(() => {
33
          }).catch((err) => {
33
            store.dispatch('FedLogOut').then(() => {
34
            store.dispatch('FedLogOut').then(() => {
34
              Message.error('登录状态超时,请重新登录')
35
              Message.error(err || '登录状态失效,请重新登录')
35
              next({ path: '/' })
36
              next({ path: '/' })
36
            })
37
            })
37
          })
38
          })
38
        } else {
39
        } else {
39
          console.log(33333)
40
          next()
40
          if (hasPermission(store.getters.roles, to.meta.roles)) {
41
            next()//
42
          } else {
43
            next({ path: '/401', replace: true, query: { noGoBack: true }})
44
          }
41
        }
45
        }
42
      }
46
      }
43
    } else {
47
    } else {
44
      if (whiteList.indexOf(to.path) !== -1) {
48
      if (whiteList.indexOf(to.path) !== -1) {
45
        console.log(444444)
46
        next()
49
        next()
47
      } else {
50
      } else {
48
        console.log(55555)
49
        next('/login')
51
        next('/login')
50
        NProgress.done()
52
        NProgress.done()
51
      }
53
      }

+ 22 - 79
src/router/index.js

53
    path: '',
53
    path: '',
54
    component: Layout,
54
    component: Layout,
55
    name: 'bridgesConsole',
55
    name: 'bridgesConsole',
56
    meta: {
57
      noCache: true
58
    },
56
    // meta: {
57
    //   noCache: true
58
    // },
59
    children: [
59
    children: [
60
      {
60
      {
61
        path: 'bridgeDetail',
61
        path: 'bridgeDetail',
62
        name: 'bridgeDetail',
62
        name: 'bridgeDetail',
63
        component: () => import('@/views/bridgesConsole/bridgeDetail/index'),
64
        meta: { noCache: true }
63
        component: () => import('@/views/bridgesConsole/bridgeDetail/index')
64
        // meta: { noCache: true }
65
      },
65
      },
66
      {
66
      {
67
        path: 'danger',
67
        path: 'danger',
80
            path: 'dangerDetail',
80
            path: 'dangerDetail',
81
            name: 'dangerDetail',
81
            name: 'dangerDetail',
82
            component: () => import('@/views/bridgesConsole/bridgeDanger/dangerDetail'),
82
            component: () => import('@/views/bridgesConsole/bridgeDanger/dangerDetail'),
83
            meta: { title: '报警信息浏览', noCache: true }
83
            meta: { title: '报警信息浏览' }
84
          }
84
          }
85
        ]
85
        ]
86
      },
86
      },
91
        meta: { title: '历史监测信息查询', noCache: true }
91
        meta: { title: '历史监测信息查询', noCache: true }
92
      }
92
      }
93
    ]
93
    ]
94
  },
94
  }
95
]
96
97
// 实例化vue的时候只挂载constantRouter
98
99
export default new Router({
100
  // mode: 'history', //后端支持可开
101
  scrollBehavior: () => ({ y: 0 }),
102
  routes: constantRouterMap
103
})
104
105
// 异步挂载的路由
106
// 动态需要根据权限加载的路由表
107
108
export const asyncRouterMap = [
95
  {
109
  {
96
    path: '',
110
    path: '',
97
    component: Layout,
111
    component: Layout,
148
        meta: { title: '传感器配置', noCache: true }
162
        meta: { title: '传感器配置', noCache: true }
149
      }
163
      }
150
    ]
164
    ]
151
  }
152
]
153
154
// 实例化vue的时候只挂载constantRouter
155
156
export default new Router({
157
  // mode: 'history', //后端支持可开
158
  scrollBehavior: () => ({ y: 0 }),
159
  routes: constantRouterMap
160
})
161
162
// 异步挂载的路由
163
// 动态需要根据权限加载的路由表
164
165
export const asyncRouterMap = [
166
  // {
167
  //   path: '',
168
  //   component: Layout,
169
  //   name: 'peoplesManage',
170
  //   meta: {
171
  //     title: '用户系统管理',
172
  //     icon: 'peoples',
173
  //     roles: ['1'],
174
  //     noCache: true
175
  //   },
176
  //   alwaysShow: true,
177
  //   children: [
178
  //     {
179
  //       path: 'infoManage',
180
  //       name: 'infoManage',
181
  //       component: () => import('@/views/peoplesManage/infoManage/index'),
182
  //       meta: { title: '用户信息管理', noCache: true }
183
  //     }
184
  //   ]
185
  // },
186
  // {
187
  //   path: '',
188
  //   component: Layout,
189
  //   name: 'BaseInfoManage',
190
  //   meta: {
191
  //     title: '基础信息管理',
192
  //     icon: 'list',
193
  //     roles: ['1'],
194
  //     noCache: true
195
  //   },
196
  //   children: [
197
  //     {
198
  //       path: 'bridgesInfo',
199
  //       name: 'BridgesInfo',
200
  //       component: () => import('@/views/baseInfoManage/bridgesInfo/index'),
201
  //       meta: { title: '桥梁信息管理', noCache: true }
202
  //     },
203
  //     {
204
  //       path: 'serversConfig',
205
  //       name: 'ServersConfig',
206
  //       component: () => import('@/views/baseInfoManage/serversConfig/index'),
207
  //       meta: { title: '采集服务器配置', noCache: true }
208
  //     },
209
  //     {
210
  //       path: 'boxesConfig',
211
  //       name: 'BoxesConfig',
212
  //       component: () => import('@/views/baseInfoManage/boxesConfig/index'),
213
  //       meta: { title: '采集盒配置', noCache: true }
214
  //     },
215
  //     {
216
  //       path: 'sensorsConfig',
217
  //       name: 'SensorsConfig',
218
  //       component: () => import('@/views/baseInfoManage/sensorsConfig/index'),
219
  //       meta: { title: '传感器配置', noCache: true }
220
  //     }
221
  //   ]
222
  // },
165
  },
223
166
224
  { path: '*', redirect: '/404', hidden: true }
167
  { path: '*', redirect: '/404', hidden: true }
225
]
168
]

+ 5 - 5
src/store/modules/user.js

1
import { login, logout, getInfo } from '@/api/login'
1
import { login, logout, getInfo } from '@/api/login'
2
import { getSession, removeSession } from '@/utils/auth'
2
import { getCookiesName, setCookiesName, removeCookiesName } from '@/utils/auth'
3
3
4
const user = {
4
const user = {
5
  state: {
5
  state: {
8
    name: '',
8
    name: '',
9
    roles: [],
9
    roles: [],
10
    logins: '',
10
    logins: '',
11
    session: getSession()
11
    session: getCookiesName()
12
  },
12
  },
13
  mutations: {
13
  mutations: {
14
    SET_ACCOUNT: (state, account) => {
14
    SET_ACCOUNT: (state, account) => {
47
                commit('SET_USERID', dataS.id)
47
                commit('SET_USERID', dataS.id)
48
                commit('SET_ROLES', [dataS.type.toString()])
48
                commit('SET_ROLES', [dataS.type.toString()])
49
                commit('SET_NAME', dataS.name)
49
                commit('SET_NAME', dataS.name)
50
                setCookiesName(dataS.name)
50
              }
51
              }
51
            }
52
            }
52
          }
53
          }
61
    GetUserInfo({ commit, state }) {
62
    GetUserInfo({ commit, state }) {
62
      return new Promise((resolve, reject) => {
63
      return new Promise((resolve, reject) => {
63
        getInfo().then(response => {
64
        getInfo().then(response => {
64
          commit('SET_LOGIN', response.success)
65
          if (response.success) {
65
          if (response.success) {
66
            if (response.data) {
66
            if (response.data) {
67
              const dataS = response.data
67
              const dataS = response.data
89
          commit('SET_ROLES', [])
89
          commit('SET_ROLES', [])
90
          commit('SET_NAME', '')
90
          commit('SET_NAME', '')
91
          commit('SET_SESSION', '')
91
          commit('SET_SESSION', '')
92
          removeSession()
92
          removeCookiesName()
93
          resolve()
93
          resolve()
94
        }).catch(error => {
94
        }).catch(error => {
95
          reject(error)
95
          reject(error)
101
    FedLogOut({ commit }) {
101
    FedLogOut({ commit }) {
102
      return new Promise(resolve => {
102
      return new Promise(resolve => {
103
        commit('SET_SESSION', '')
103
        commit('SET_SESSION', '')
104
        removeSession()
104
        removeCookiesName()
105
        resolve()
105
        resolve()
106
      })
106
      })
107
    }
107
    }

+ 6 - 8
src/utils/auth.js

1
import store from '@/store'
2
import Cookies from 'js-cookie'
1
import Cookies from 'js-cookie'
3
2
4
export function getSession() {
5
  return Cookies.get('JSESSIONID')
3
export function getCookiesName() {
4
  return Cookies.get('nameKey')
6
}
5
}
7
6
8
export function removeSession() {
9
  return Cookies.remove('JSESSIONID')
7
export function setCookiesName(name) {
8
  return Cookies.set('nameKey', name)
10
}
9
}
11
10
12
export function getIfLoginUser() {
13
  store.dispatch('GetUserInfo').then(res => { // 判断是否有登录用户
14
  })
11
export function removeCookiesName() {
12
  return Cookies.remove('nameKey')
15
}
13
}

+ 1 - 1
src/views/dashboard/admin/index.vue

13
  },
13
  },
14
  methods: {
14
  methods: {
15
    toPath() {
15
    toPath() {
16
      this.$router.push({ path: '/infoManage' })
16
      this.$router.push({ name: 'infoManage' })
17
    }
17
    }
18
  }
18
  }
19
}
19
}

+ 39 - 6
src/views/layout/components/TopNavbar.vue

1
<template>
1
<template>
2
  <el-menu class="topnavbar" mode="horizontal">
2
  <el-menu class="topnavbar" mode="horizontal">
3
    <div class="logo-container">
3
    <div class="logo-container">
4
      <img class="logo-wrapper" src="/static/touchwave.png" alt="">
5
      <el-dropdown v-if="roles.indexOf('1')<0" trigger="click" style="cursor: pointer;margin-left:20px">
4
      <div class="logo-wrapper">
5
        <img width="100%" src="/static/touchwave.png" alt="">
6
      </div>
7
      <el-dropdown v-if="roles.indexOf('1')<0" trigger="click" class="drop-menu">
6
        <span class="el-dropdown-link">
8
        <span class="el-dropdown-link">
7
          {{showName}}<i class="el-icon-arrow-down el-icon--right"></i>
9
          {{showName}}<i class="el-icon-arrow-down el-icon--right"></i>
8
        </span>
10
        </span>
9
        <el-dropdown-menu style="min-width:120px;" slot="dropdown">
10
          <el-dropdown-item v-for="item in dataList" :key="item.index"@click.native="goToDashboardC(item.id, item.shortName)">{{item.shortName}}</el-dropdown-item>
11
        <el-dropdown-menu class="drop-menu-list" style="min-width:120px;" slot="dropdown">
12
          <el-dropdown-item v-for="(item,index) in dataList" :key="item.index" :disabled="item.disab" @click.native="goToDashboardC(index, item.id, item.shortName)">{{item.shortName}}
13
            <i v-if="item.disab" class="el-icon-check"></i>
14
          </el-dropdown-item>
11
        </el-dropdown-menu>
15
        </el-dropdown-menu>
12
      </el-dropdown>
16
      </el-dropdown>
13
    </div>
17
    </div>
68
      }
72
      }
69
      getBridgeList(param).then(res => {
73
      getBridgeList(param).then(res => {
70
        if (res.success) {
74
        if (res.success) {
75
          for (let i = 0; i < res.data.data.length; i++) {
76
            if (res.data.data[i].id === this.bridgeId) {
77
              res.data.data[i].disab = true
78
            } else {
79
              res.data.data[i].disab = false
80
            }
81
          }
71
          this.dataList = res.data.data
82
          this.dataList = res.data.data
72
        }
83
        }
73
      })
84
      })
74
    },
85
    },
75
    goToDashboardC(id, name) {
86
    goToDashboardC(index, id, name) {
76
      this.$router.push({
87
      this.$router.push({
77
        path: '/bridgeDetail',
88
        path: '/bridgeDetail',
78
        query: { id: id, name: name }
89
        query: { id: id, name: name }
79
      })
90
      })
91
      this.dataList[index].disab = true
80
      this.showName = name
92
      this.showName = name
81
    }
93
    }
82
  }
94
  }
98
    display: inline-block;
110
    display: inline-block;
99
    position: absolute;
111
    position: absolute;
100
    left:10px;
112
    left:10px;
113
    overflow: hidden;
101
    .logo-wrapper {
114
    .logo-wrapper {
115
      float:left;
102
      width:260px;
116
      width:260px;
103
      margin:14px 20px;
117
      margin:10px 12px;
118
    }
119
    .drop-menu{
120
      float:left;
121
      cursor: pointer;
122
      margin:0;
123
      margin-left:20px;
104
    }
124
    }
105
  }
125
  }
106
  .avatar-container {
126
  .avatar-container {
126
    }
146
    }
127
  }
147
  }
128
}
148
}
149
.drop-menu-list{
150
  .el-dropdown-menu__item{
151
    display: flex;
152
    align-items: center;
153
    justify-content: space-between;
154
    &.is-disabled{
155
      background: #f3f5f7;
156
    }
157
    .el-icon-check{
158
      font-weight: bold;
159
    }
160
  }
161
}
129
</style>
162
</style>
130
163

+ 2 - 0
src/views/login/index.vue

95
                this.$router.push({ path: '/' })
95
                this.$router.push({ path: '/' })
96
              } else {
96
              } else {
97
                Message.error('登录账号与密码不匹配,请检查后重试')
97
                Message.error('登录账号与密码不匹配,请检查后重试')
98
                this.changeImgVc()
98
                return
99
                return
99
              }
100
              }
100
            } else {
101
            } else {
114
              for (let i = 0; i < errorCode.length; i++) {
115
              for (let i = 0; i < errorCode.length; i++) {
115
                if (response.code === errorCode[i].code) {
116
                if (response.code === errorCode[i].code) {
116
                  Message.error(errorCode[i].msg)
117
                  Message.error(errorCode[i].msg)
118
                  this.changeImgVc()
117
                  return
119
                  return
118
                }
120
                }
119
              }
121
              }