xuhuajiao
/
canvasScreen_admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

登录-动态菜单

dev
xuhuajiao 4 years ago
parent
003cc27eea
commit
7049adc8c8
14 changed files with 228 additions and 211 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      .env.development
  2. 5
      src/api/login.js
  3. 3
      src/assets/styles/adminIndex.scss
  4. 8
      src/assets/styles/variables.scss
  5. 21
      src/layout/components/Navbar.vue
  6. 10
      src/main.js
  7. 80
      src/router/index.js
  8. 209
      src/router/routers.js
  9. 44
      src/store/getters.js
  10. 28
      src/store/modules/user.js
  11. 9
      src/utils/index.js
  12. 2
      src/utils/request.js
  13. 3
      src/views/components/ThemeGalleryList.vue
  14. 5
      src/views/login.vue

8
.env.development
View File

@ -4,12 +4,12 @@ ENV = 'development'
#VUE_APP_BASE_API = '/dev-api'
# 刘力-本地服地址
#VUE_APP_BASE_API = 'http://192.168.99.103:7000'
#VUE_APP_WS_API = 'ws://192.168.99.103:7000'
VUE_APP_BASE_API = 'http://192.168.99.65:7000'
VUE_APP_WS_API = 'ws://192.168.99.65:7000'
# 许镇-本地服地址
VUE_APP_BASE_API = 'http://192.168.99.84:7000'
VUE_APP_WS_API = 'ws://192.168.99.84:7000'
#VUE_APP_BASE_API = 'http://192.168.99.84:7000'
#VUE_APP_WS_API = 'ws://192.168.99.84:7000'
# 外网接口地址
#VUE_APP_BASE_API = 'https://yxkadmin.aiyxlib.com'

5
src/api/login.js
View File

@ -1,6 +1,6 @@
import request from '@/utils/request'
export function login(username, password, phone, code, uuid) {
export function login(username, password, phone, code, uuid, rememberMe) {
return request({
url: 'auth/login',
method: 'post',
@ -9,7 +9,8 @@ export function login(username, password, phone, code, uuid) {
password,
phone,
code,
uuid
uuid,
rememberMe
}
})
}

3
src/assets/styles/adminIndex.scss
View File

@ -43,13 +43,14 @@ img[src=""],img:not([src]){opacity:0;}
.login-code {
position: absolute;
right: 0;
right: 2px;
top: 0;
width: 33%;
display: inline-block;
height: 40px;
img {
width: 100%;
cursor: pointer;
vertical-align: middle;
}

8
src/assets/styles/variables.scss
View File

@ -9,15 +9,15 @@ $yellow:#FEC171;
$panGreen: #30B08F;
// sidebar
$menuText:#bfcbd9;
$menuText:#333;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;
$subMenuActiveText:#333;
$menuBg:#fff;
$menuHover:#263445;
$menuHover:#3a8aeb;
$subMenuBg:#fff;
$subMenuHover:#001528;
$subMenuHover:#3a8aeb;
$sideBarWidth: 264px;

21
src/layout/components/Navbar.vue
View File

@ -1,22 +1,22 @@
<template>
<div class="navbar">
<!-- 顶部菜单 start-->
<div class="navmenu">武汉图书馆</div>
<div class="navmenu">{{ user.org.name }}</div>
<!-- 顶部菜单 end-->
<div class="right-menu">
<div class="current_date">2022-02-25 星期五</div>
<div class="current_date">{{ nowDate }}</div>
<el-dropdown class="avatar-container right-menu-item" trigger="click">
<div class="avatar-wrapper">
<!-- <p>{{user.phone}}</p> -->
<p class="user_phone">13476289682</p>
<p class="user_phone">{{ user.phone }}</p>
<i class="el-icon-caret-bottom"></i>
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/center">
<!-- <router-link to="/user/center">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
</router-link> -->
<span style="display:block;" @click="open">
<el-dropdown-item divided>退出登录</el-dropdown-item>
<!-- <el-dropdown-item> -->
<el-dropdown-item>退出登录</el-dropdown-item>
</span>
</el-dropdown-menu>
</el-dropdown>
@ -27,17 +27,22 @@
<script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'
import { getNowFormatDate, getNowFormatWeek } from '@/utils/index.js'
export default {
components: {},
data() {
return {
Avatar: Avatar
Avatar: Avatar,
nowDate: null
}
},
computed: {
...mapGetters(['user'])
},
mounted() {
this.nowDate = getNowFormatDate() + '' + getNowFormatWeek()
},
methods: {
open() {
this.$confirm('确定注销并退出系统吗？', '提示', {

10
src/main.js
View File

@ -40,15 +40,15 @@ Vue.use(mavonEditor)
Vue.use(permission)
Vue.use(dict)
Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size
size: Cookies.get('size') || 'small' // set element-ui default size
})
Vue.use(vcolorpicker)
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,
render: h => h(App)
el: '#app',
router,
store,
render: h => h(App)
})

80
src/router/index.js
View File

@ -3,13 +3,13 @@ import store from '@/store'
import Config from '@/settings'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // getToken from cookie
import { getToken } from '@/utils/auth' // getToken from cookie
import { buildMenus } from '@/api/system/menu'
import { filterAsyncRouter } from '@/store/modules/permission'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
// const whiteList = ['/login', '/forgetPassword'] // no redirect whitelist
const whiteList = ['/login', '/forgetPassword'] // no redirect whitelist
router.beforeEach((to, from, next) => {
if (to.meta.title) {
@ -17,49 +17,51 @@ router.beforeEach((to, from, next) => {
}
// 加载效果
NProgress.start()
next()
NProgress.done()
// if (getToken()) {
// // 已登录且要跳转的页面是登录页
// if (to.path === '/login') {
// next({ path: '/' })
// NProgress.done()
// } else {
// if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
// store.dispatch('GetInfo').then(() => { // 拉取user_info
// // 动态路由，拉取菜单
// loadMenus(next, to)
// }).catch(() => {
// store.dispatch('LogOut').then(() => {
// location.reload() // 为了重新实例化vue-router对象 避免bug
// })
// })
// // 登录时未拉取 菜单，在此处拉取
// } else if (store.getters.loadMenus) {
// // 修改成false，防止死循环
// store.dispatch('updateLoadMenus')
// loadMenus(next, to)
// } else {
// next()
// }
// }
// } else {
// /* has no token*/
// if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
// next()
// } else {
// next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
// NProgress.done()
// }
// }
// next()
// NProgress.done()
if (getToken()) {
// 已登录且要跳转的页面是登录页
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(() => { // 拉取user_info
// 动态路由，拉取菜单
loadMenus(next, to)
}).catch(() => {
console.log('logOut')
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
// 登录时未拉取 菜单，在此处拉取
} else if (store.getters.loadMenus) {
// 修改成false，防止死循环
store.dispatch('updateLoadMenus')
loadMenus(next, to)
} else {
next()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next()
} else {
console.log('efdlsdkadjas;dkasdk')
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
NProgress.done()
}
}
})
export const loadMenus = (next, to) => {
buildMenus().then(res => {
const sdata = JSON.parse(JSON.stringify(res))
const rdata = JSON.parse(JSON.stringify(res))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, true)
const sidebarRoutes = filterAsyncRouter(sdata.data)
const rewriteRoutes = filterAsyncRouter(rdata.data, true)
rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由

209
src/router/routers.js
View File

@ -52,54 +52,54 @@ export const constantRouterMap = [
name: 'Dashboard',
meta: {
title: '首页',
icon: 'index',
icon: 'shouye',
affix: true,
noCache: true
}
}]
},
{
path: '/system',
component: Layout,
hidden: true,
redirect: 'noredirect',
meta: {
title: '权限管理',
icon: 'documentation'
},
children: [{
path: '/user',
component: () => import('@/views/system/user/index'),
meta: {
title: '用户管理',
icon: 'edit'
}
},
{
path: '/role',
component: () => import('@/views/system/role/index'),
meta: {
title: '角色管理',
icon: 'edit'
}
},
{
path: '/dept',
component: () => import('@/views/system/dept/index'),
meta: {
title: '机构管理',
icon: 'edit'
}
},
{
path: '/menu',
component: () => import('@/views/system/menu/index'),
meta: {
title: '权限管理',
icon: 'edit'
}
}]
},
}
// {
// path: '/system',
// component: Layout,
// hidden: true,
// redirect: 'noredirect',
// meta: {
// title: '权限管理',
// icon: 'documentation'
// },
// children: [{
// path: '/user',
// component: () => import('@/views/system/user/index'),
// meta: {
// title: '用户管理',
// icon: 'edit'
// }
// },
// {
// path: '/role',
// component: () => import('@/views/system/role/index'),
// meta: {
// title: '角色管理',
// icon: 'edit'
// }
// },
// {
// path: '/dept',
// component: () => import('@/views/system/dept/index'),
// meta: {
// title: '机构管理',
// icon: 'edit'
// }
// },
// {
// path: '/menu',
// component: () => import('@/views/system/menu/index'),
// meta: {
// title: '权限管理',
// icon: 'edit'
// }
// }]
// },
// {
// path: '/role',
// component: Layout,
@ -117,67 +117,66 @@ export const constantRouterMap = [
// }
// }]
// },
{
path: '/device',
component: Layout,
meta: {
title: '设备管理',
icon: 'documentation'
},
children: [{
path: '/device',
component: () => import('@/views/device/index'),
meta: {
title: '设备列表',
icon: 'edit'
}
},
{
path: '/deviceConfig',
component: () => import('@/views/device/deviceConfig'),
meta: {
title: '开关机配置',
icon: 'edit'
}
}]
},
{
path: '/content',
component: Layout,
meta: {
title: '内容管理',
icon: 'documentation'
},
children: [{
path: '/content',
component: () => import('@/views/materialContent/index'),
meta: {
title: '素材库',
icon: 'edit'
}
},
{
path: '/publish',
component: () => import('@/views/publishContent/index'),
meta: {
title: '上屏发布',
icon: 'edit'
}
},
{
path: '/theme',
component: () => import('@/views/ThemeGallery/index'),
meta: {
title: '主题库',
icon: 'edit'
}
},
{
path: '/release',
component: () => import('@/views/immediateRelease/index')
}
]
}
// {
// path: '/device',
// component: Layout,
// meta: {
// title: '设备管理',
// icon: 'documentation'
// },
// children: [{
// path: '/device',
// component: () => import('@/views/device/index'),
// meta: {
// title: '设备列表',
// icon: 'edit'
// }
// },
// {
// path: '/deviceConfig',
// component: () => import('@/views/device/deviceConfig'),
// meta: {
// title: '开关机配置',
// icon: 'edit'
// }
// }]
// },
// {
// path: '/content',
// component: Layout,
// meta: {
// title: '内容管理',
// icon: 'documentation'
// },
// children: [{
// path: '/content',
// component: () => import('@/views/materialContent/index'),
// meta: {
// title: '素材库',
// icon: 'edit'
// }
// },
// {
// path: '/publish',
// component: () => import('@/views/publishContent/index'),
// meta: {
// title: '上屏发布',
// icon: 'edit'
// }
// },
// {
// path: '/theme',
// component: () => import('@/views/ThemeGallery/index'),
// meta: {
// title: '主题库',
// icon: 'edit'
// }
// },
// {
// path: '/release',
// component: () => import('@/views/immediateRelease/index')
// }]
// }
// {
// path: '/user',
// component: Layout,

44
src/store/getters.js
View File

@ -1,26 +1,26 @@
const getters = {
deployUploadApi: state => state.api.deployUploadApi,
databaseUploadApi: state => state.api.databaseUploadApi,
size: state => state.app.size,
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
roles: state => state.user.roles,
user: state => state.user.user,
loadMenus: state => state.user.loadMenus,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters,
socketApi: state => state.api.socketApi,
imagesUploadApi: state => state.api.imagesUploadApi,
baseApi: state => state.api.baseApi,
fileUploadApi: state => state.api.fileUploadApi,
updateAvatarApi: state => state.api.updateAvatarApi,
qiNiuUploadApi: state => state.api.qiNiuUploadApi,
sqlApi: state => state.api.sqlApi,
swaggerApi: state => state.api.swaggerApi,
sidebarRouters: state => state.permission.sidebarRouters,
deployUploadApi: state => state.api.deployUploadApi,
databaseUploadApi: state => state.api.databaseUploadApi,
size: state => state.app.size,
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
roles: state => state.user.roles,
user: state => state.user.user,
loadMenus: state => state.user.loadMenus,
permission_routers: state => state.permission.routers,
addRouters: state => state.permission.addRouters,
socketApi: state => state.api.socketApi,
imagesUploadApi: state => state.api.imagesUploadApi,
baseApi: state => state.api.baseApi,
fileUploadApi: state => state.api.fileUploadApi,
updateAvatarApi: state => state.api.updateAvatarApi,
qiNiuUploadApi: state => state.api.qiNiuUploadApi,
sqlApi: state => state.api.sqlApi,
swaggerApi: state => state.api.swaggerApi,
sidebarRouters: state => state.permission.sidebarRouters
}
export default getters

28
src/store/modules/user.js
View File

@ -30,14 +30,17 @@ const user = {
Login({ commit }, userInfo) {
const rememberMe = userInfo.rememberMe
return new Promise((resolve, reject) => {
login(userInfo.username, userInfo.password, userInfo.phone, userInfo.code, userInfo.uuid).then(res => {
setToken(res.token, rememberMe)
commit('SET_TOKEN', res.token)
setUserInfo(res.user, commit)
login(userInfo.username, userInfo.password, userInfo.phone, userInfo.code, userInfo.uuid, userInfo.rememberMe).then(res => {
console.log('store')
console.log(res)
setToken(res.data.token, rememberMe)
commit('SET_TOKEN', res.data.token)
setUserInfo(res.data.user, commit)
// 第一次加载菜单时用到， 具体见 src 目录下的 permission.js
commit('SET_LOAD_MENUS', true)
resolve()
}).catch(error => {
console.log('store2')
reject(error)
})
})
@ -46,7 +49,7 @@ const user = {
SetPassword({ commit }, userInfo) {
return new Promise((resolve, reject) => {
setPassword(userInfo.phone, userInfo.new_pass, userInfo.code, userInfo.uuid).then(res => {
setUserInfo(res, commit)
setUserInfo(res.data.user, commit)
resolve(res)
}).catch(error => {
reject(error)
@ -56,8 +59,9 @@ const user = {
// 获取用户信息
GetInfo({ commit }, userInfo) {
return new Promise((resolve, reject) => {
getInfo(userInfo.phone,).then(res => {
setUserInfo(res, commit)
getInfo(userInfo.phone).then(res => {
console.log(res)
setUserInfo(res.data.user, commit)
resolve(res)
}).catch(error => {
reject(error)
@ -85,11 +89,11 @@ const user = {
}
}
// export const logOut = (commit) => {
// commit('SET_TOKEN', '')
// commit('SET_ROLES', [])
// removeToken()
// }
export const logOut = (commit) => {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
}
export const setUserInfo = (res, commit) => {
// 如果没有任何权限，则赋予一个默认的权限，避免请求死循环

9
src/utils/index.js
View File

@ -400,6 +400,15 @@ export function getNowFormatDate() {
return currentdate
}
// 获取当天星期几
export function getNowFormatWeek() {
const date = new Date()
const week = new Date(date).getDay()
const weeks = ['日', '一', '二', '三', '四', '五', '六']
const getWeek = '星期' + weeks[week]
return getWeek
}
// 秒数转时分秒格式 h:m:s
export function getSeconds(s) {
if (s != null) {

2
src/utils/request.js
View File

@ -56,7 +56,7 @@ service.interceptors.response.use(
return Promise.reject(error)
}
}
console.log(code)
console.log('code', code)
if (code) {
if (code === 401) {
store.dispatch('LogOut').then(() => {

3
src/views/components/ThemeGalleryList.vue
View File

@ -141,7 +141,6 @@ export default {
this.activeIndex = tab.index
if (this.themeItemActive == 2) {
this.selectedListId = []
// this.$refs.myAlbum.selectInFolderid = []
this.$emit('pf')
} else {
@ -157,13 +156,11 @@ export default {
this.$router.push('/theme')
this.$emit('pf')
// this.$root.bus.$emit('getMyAlbum')
// this.$nextTick(function() {
// this.$refs.myAlbum.getMyAlbum()
// })
} else {
this.themeGalleryList = []
// this.isMyAlbum = false
this.getThemeGallery()
}
},

5
src/views/login.vue
View File

@ -124,8 +124,8 @@ export default {
methods: {
getCode() {
getCodeImg().then(res => {
this.codeUrl = res.img
this.loginForm.uuid = res.uuid
this.codeUrl = res.data.img
this.loginForm.uuid = res.data.uuid
})
},
getCookie() {
@ -174,7 +174,6 @@ export default {
Cookies.remove('password')
Cookies.remove('rememberMe')
}
console.log(user)
this.$store
.dispatch('Login', user)
.then(() => {

Write Preview
Loading…
Cancel
Save