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

登录-动态菜单

dev
xuhuajiao 3 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
Unified 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. 76
      src/router/index.js
  7. 207
      src/router/routers.js
  8. 2
      src/store/getters.js
  9. 28
      src/store/modules/user.js
  10. 9
      src/utils/index.js
  11. 2
      src/utils/request.js
  12. 3
      src/views/components/ThemeGalleryList.vue
  13. 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 = '/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' #VUE_APP_BASE_API = 'https://yxkadmin.aiyxlib.com'

5
src/api/login.js
View File

@ -1,6 +1,6 @@
import request from '@/utils/request' import request from '@/utils/request'
export function login(username, password, phone, code, uuid) {
export function login(username, password, phone, code, uuid, rememberMe) {
return request({ return request({
url: 'auth/login', url: 'auth/login',
method: 'post', method: 'post',
@ -9,7 +9,8 @@ export function login(username, password, phone, code, uuid) {
password, password,
phone, phone,
code, 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 { .login-code {
position: absolute; position: absolute;
right: 0;
right: 2px;
top: 0; top: 0;
width: 33%; width: 33%;
display: inline-block; display: inline-block;
height: 40px; height: 40px;
img { img {
width: 100%;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
} }

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

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

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

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

76
src/router/index.js
View File

@ -3,13 +3,13 @@ import store from '@/store'
import Config from '@/settings' import Config from '@/settings'
import NProgress from 'nprogress' // progress bar import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style 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 { buildMenus } from '@/api/system/menu'
import { filterAsyncRouter } from '@/store/modules/permission' import { filterAsyncRouter } from '@/store/modules/permission'
NProgress.configure({ showSpinner: false }) // NProgress Configuration 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) => { router.beforeEach((to, from, next) => {
if (to.meta.title) { if (to.meta.title) {
@ -17,49 +17,51 @@ router.beforeEach((to, from, next) => {
} }
// 加载效果 // 加载效果
NProgress.start() 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(() => {
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() next()
} else {
console.log('efdlsdkadjas;dkasdk')
next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
NProgress.done() 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()
// }
// }
}
}
}) })
export const loadMenus = (next, to) => { export const loadMenus = (next, to) => {
buildMenus().then(res => { buildMenus().then(res => {
const sdata = JSON.parse(JSON.stringify(res)) const sdata = JSON.parse(JSON.stringify(res))
const rdata = 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 }) rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由 store.dispatch('GenerateRoutes', rewriteRoutes).then(() => { // 存储路由

207
src/router/routers.js
View File

@ -52,54 +52,54 @@ export const constantRouterMap = [
name: 'Dashboard', name: 'Dashboard',
meta: { meta: {
title: '首页', title: '首页',
icon: 'index',
icon: 'shouye',
affix: true, affix: true,
noCache: 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', // path: '/role',
// component: Layout, // 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', // path: '/user',
// component: Layout, // component: Layout,

2
src/store/getters.js
View File

@ -20,7 +20,7 @@ const getters = {
qiNiuUploadApi: state => state.api.qiNiuUploadApi, qiNiuUploadApi: state => state.api.qiNiuUploadApi,
sqlApi: state => state.api.sqlApi, sqlApi: state => state.api.sqlApi,
swaggerApi: state => state.api.swaggerApi, swaggerApi: state => state.api.swaggerApi,
sidebarRouters: state => state.permission.sidebarRouters,
sidebarRouters: state => state.permission.sidebarRouters
} }
export default getters export default getters

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

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

9
src/utils/index.js
View File

@ -400,6 +400,15 @@ export function getNowFormatDate() {
return currentdate 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 // 秒数转时分秒格式 h:m:s
export function getSeconds(s) { export function getSeconds(s) {
if (s != null) { if (s != null) {

2
src/utils/request.js
View File

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

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

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

5
src/views/login.vue
View File

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

Write Preview
Loading…
Cancel
Save