+
+
-
diff --git a/src/api/login.js b/src/api/user.js
similarity index 78%
rename from src/api/login.js
rename to src/api/user.js
index 3758dec..de69f70 100644
--- a/src/api/login.js
+++ b/src/api/user.js
@@ -1,13 +1,10 @@
import request from '@/utils/request'
-export function login(username, password) {
+export function login(data) {
return request({
url: '/user/login',
method: 'post',
- data: {
- username,
- password
- }
+ data
})
}
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 0c8a7fb..29f9a04 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -2,7 +2,7 @@
+
@@ -20,10 +20,11 @@ export default {
isActive: {
type: Boolean,
default: false
- },
- toggleClick: {
- type: Function,
- default: null
+ }
+ },
+ methods: {
+ toggleClick() {
+ this.$emit('toggleClick')
}
}
}
@@ -32,10 +33,11 @@ export default {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
new file mode 100644
index 0000000..4953f36
--- /dev/null
+++ b/src/layout/components/Navbar.vue
@@ -0,0 +1,139 @@
+
+
+
+
+
+
+
diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js
new file mode 100644
index 0000000..bc14856
--- /dev/null
+++ b/src/layout/components/Sidebar/FixiOSBug.js
@@ -0,0 +1,26 @@
+export default {
+ computed: {
+ device() {
+ return this.$store.state.app.device
+ }
+ },
+ mounted() {
+ // In order to fix the click on menu on the ios device will trigger the mouseleave bug
+ // https://github.com/PanJiaChen/vue-element-admin/issues/1135
+ this.fixBugIniOS()
+ },
+ methods: {
+ fixBugIniOS() {
+ const $subMenu = this.$refs.subMenu
+ if ($subMenu) {
+ const handleMouseleave = $subMenu.handleMouseleave
+ $subMenu.handleMouseleave = (e) => {
+ if (this.device === 'mobile') {
+ return
+ }
+ handleMouseleave(e)
+ }
+ }
+ }
+ }
+}
diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
similarity index 64%
rename from src/views/layout/components/Sidebar/Item.vue
rename to src/layout/components/Sidebar/Item.vue
index 7dd341d..b515f61 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -3,18 +3,17 @@ export default {
name: 'MenuItem',
functional: true,
props: {
- meta: {
- type: Object,
- default: () => {
- return {
- title: '',
- icon: ''
- }
- }
+ icon: {
+ type: String,
+ default: ''
+ },
+ title: {
+ type: String,
+ default: ''
}
},
render(h, context) {
- const { icon, title } = context.props.meta
+ const { icon, title } = context.props
const vnodes = []
if (icon) {
diff --git a/src/views/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue
similarity index 97%
rename from src/views/layout/components/Sidebar/Link.vue
rename to src/layout/components/Sidebar/Link.vue
index bff45cd..eb4dd10 100644
--- a/src/views/layout/components/Sidebar/Link.vue
+++ b/src/layout/components/Sidebar/Link.vue
@@ -2,7 +2,7 @@
-
diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
new file mode 100644
index 0000000..040fab6
--- /dev/null
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -0,0 +1,82 @@
+
+ (must set!!!)
-* meta : {
- title: 'title' the name show in subMenu and breadcrumb (recommend set)
+ * Note: sub-menu only appear when route children.length >= 1
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
+ *
+ * hidden: true if set true, item will not show in the sidebar(default is false)
+ * alwaysShow: true if set true, will always show the root menu
+ * if not set alwaysShow, when item has more than one children route,
+ * it will becomes nested mode, otherwise not show the root menu
+ * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
+ * name:'router-name' the name is used by (must set!!!)
+ * meta : {
+ roles: ['admin','editor'] control the page roles (you can set multiple roles)
+ title: 'title' the name show in sidebar and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar
- breadcrumb: false if false, the item will hidden in breadcrumb(default is true)
+ breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
+ activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
}
-**/
-export const constantRouterMap = [
- { path: '/login', component: () => import('@/views/login/index'), hidden: true },
- { path: '/404', component: () => import('@/views/404'), hidden: true },
+ */
+
+/**
+ * constantRoutes
+ * a base page that does not have permission requirements
+ * all roles can be accessed
+ */
+export const constantRoutes = [
+ {
+ path: '/login',
+ component: () => import('@/views/login/index'),
+ hidden: true
+ },
+
+ {
+ path: '/404',
+ component: () => import('@/views/404'),
+ hidden: true
+ },
{
path: '/',
component: Layout,
redirect: '/dashboard',
- name: 'Dashboard',
- hidden: true,
children: [{
path: 'dashboard',
- component: () => import('@/views/dashboard/index')
+ name: 'Dashboard',
+ component: () => import('@/views/dashboard/index'),
+ meta: { title: 'Dashboard', icon: 'dashboard' }
}]
},
@@ -71,8 +88,14 @@ export const constantRouterMap = [
meta: { title: 'Form', icon: 'form' }
}
]
- },
+ }
+]
+/**
+ * asyncRoutes
+ * the routes that need to be dynamically loaded based on user roles
+ */
+export const asyncRoutes = [
{
path: '/nested',
component: Layout,
@@ -142,11 +165,22 @@ export const constantRouterMap = [
]
},
+ // 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
-export default new Router({
- // mode: 'history', //后端支持可开
+const createRouter = () => new Router({
+ // mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
- routes: constantRouterMap
+ routes: constantRoutes
})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+ const newRouter = createRouter()
+ router.matcher = newRouter.matcher // reset router
+}
+
+export default router
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..ae3c494
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,16 @@
+module.exports = {
+
+ title: 'Vue Admin Template',
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether fix the header
+ */
+ fixedHeader: false,
+
+ /**
+ * @type {boolean} true | false
+ * @description Whether show the logo in sidebar
+ */
+ sidebarLogo: false
+}
diff --git a/src/store/getters.js b/src/store/getters.js
index 7fbf1f4..a108508 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -4,6 +4,7 @@ const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
- roles: state => state.user.roles
+ roles: state => state.user.roles,
+ permission_routes: state => state.permission.routes
}
export default getters
diff --git a/src/store/index.js b/src/store/index.js
index 6b6be08..6ae5dad 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,18 @@
import Vue from 'vue'
import Vuex from 'vuex'
-import app from './modules/app'
-import user from './modules/user'
import getters from './getters'
+import app from './modules/app'
+import permission from './modules/permission'
+import settings from './modules/settings'
+import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
+ permission,
+ settings,
user
},
getters
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index f487241..7ea7e33 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -1,43 +1,48 @@
import Cookies from 'js-cookie'
-const app = {
- state: {
- sidebar: {
- opened: !+Cookies.get('sidebarStatus'),
- withoutAnimation: false
- },
- device: 'desktop'
+const state = {
+ sidebar: {
+ opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+ withoutAnimation: false
},
- mutations: {
- TOGGLE_SIDEBAR: state => {
- if (state.sidebar.opened) {
- Cookies.set('sidebarStatus', 1)
- } else {
- Cookies.set('sidebarStatus', 0)
- }
- state.sidebar.opened = !state.sidebar.opened
- state.sidebar.withoutAnimation = false
- },
- CLOSE_SIDEBAR: (state, withoutAnimation) => {
+ device: 'desktop'
+}
+
+const mutations = {
+ TOGGLE_SIDEBAR: state => {
+ state.sidebar.opened = !state.sidebar.opened
+ state.sidebar.withoutAnimation = false
+ if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
- state.sidebar.opened = false
- state.sidebar.withoutAnimation = withoutAnimation
- },
- TOGGLE_DEVICE: (state, device) => {
- state.device = device
+ } else {
+ Cookies.set('sidebarStatus', 0)
}
},
- actions: {
- ToggleSideBar: ({ commit }) => {
- commit('TOGGLE_SIDEBAR')
- },
- CloseSideBar({ commit }, { withoutAnimation }) {
- commit('CLOSE_SIDEBAR', withoutAnimation)
- },
- ToggleDevice({ commit }, device) {
- commit('TOGGLE_DEVICE', device)
- }
+ CLOSE_SIDEBAR: (state, withoutAnimation) => {
+ Cookies.set('sidebarStatus', 0)
+ state.sidebar.opened = false
+ state.sidebar.withoutAnimation = withoutAnimation
+ },
+ TOGGLE_DEVICE: (state, device) => {
+ state.device = device
}
}
-export default app
+const actions = {
+ toggleSideBar({ commit }) {
+ commit('TOGGLE_SIDEBAR')
+ },
+ closeSideBar({ commit }, { withoutAnimation }) {
+ commit('CLOSE_SIDEBAR', withoutAnimation)
+ },
+ toggleDevice({ commit }, device) {
+ commit('TOGGLE_DEVICE', device)
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions
+}
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
new file mode 100644
index 0000000..aeb5ee5
--- /dev/null
+++ b/src/store/modules/permission.js
@@ -0,0 +1,69 @@
+import { asyncRoutes, constantRoutes } from '@/router'
+
+/**
+ * Use meta.role to determine if the current user has permission
+ * @param roles
+ * @param route
+ */
+function hasPermission(roles, route) {
+ if (route.meta && route.meta.roles) {
+ return roles.some(role => route.meta.roles.includes(role))
+ } else {
+ return true
+ }
+}
+
+/**
+ * Filter asynchronous routing tables by recursion
+ * @param routes asyncRoutes
+ * @param roles
+ */
+export function filterAsyncRoutes(routes, roles) {
+ const res = []
+
+ routes.forEach(route => {
+ const tmp = { ...route }
+ if (hasPermission(roles, tmp)) {
+ if (tmp.children) {
+ tmp.children = filterAsyncRoutes(tmp.children, roles)
+ }
+ res.push(tmp)
+ }
+ })
+
+ return res
+}
+
+const state = {
+ routes: [],
+ addRoutes: []
+}
+
+const mutations = {
+ SET_ROUTES: (state, routes) => {
+ state.addRoutes = routes
+ state.routes = constantRoutes.concat(routes)
+ }
+}
+
+const actions = {
+ generateRoutes({ commit }, roles) {
+ return new Promise(resolve => {
+ let accessedRoutes
+ if (roles.includes('admin')) {
+ accessedRoutes = asyncRoutes || []
+ } else {
+ accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
+ }
+ commit('SET_ROUTES', accessedRoutes)
+ resolve(accessedRoutes)
+ })
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions
+}
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 0000000..aab31a2
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,31 @@
+import defaultSettings from '@/settings'
+
+const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
+
+const state = {
+ showSettings: showSettings,
+ fixedHeader: fixedHeader,
+ sidebarLogo: sidebarLogo
+}
+
+const mutations = {
+ CHANGE_SETTING: (state, { key, value }) => {
+ if (state.hasOwnProperty(key)) {
+ state[key] = value
+ }
+ }
+}
+
+const actions = {
+ changeSetting({ commit }, data) {
+ commit('CHANGE_SETTING', data)
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions
+}
+
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index b504067..702f39a 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -1,87 +1,102 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
+import { resetRouter } from '@/router'
-const user = {
- state: {
- token: getToken(),
- name: '',
- avatar: '',
- roles: []
+const state = {
+ token: getToken(),
+ name: '',
+ avatar: '',
+ roles: []
+}
+
+const mutations = {
+ SET_TOKEN: (state, token) => {
+ state.token = token
},
-
- mutations: {
- SET_TOKEN: (state, token) => {
- state.token = token
- },
- SET_NAME: (state, name) => {
- state.name = name
- },
- SET_AVATAR: (state, avatar) => {
- state.avatar = avatar
- },
- SET_ROLES: (state, roles) => {
- state.roles = roles
- }
+ SET_NAME: (state, name) => {
+ state.name = name
},
-
- actions: {
- // 登录
- Login({ commit }, userInfo) {
- const username = userInfo.username.trim()
- return new Promise((resolve, reject) => {
- login(username, userInfo.password).then(response => {
- const data = response.data
- setToken(data.token)
- commit('SET_TOKEN', data.token)
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
- },
-
- // 获取用户信息
- GetInfo({ commit, state }) {
- return new Promise((resolve, reject) => {
- getInfo(state.token).then(response => {
- const data = response.data
- if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
- commit('SET_ROLES', data.roles)
- } else {
- reject('getInfo: roles must be a non-null array !')
- }
- commit('SET_NAME', data.name)
- commit('SET_AVATAR', data.avatar)
- resolve(response)
- }).catch(error => {
- reject(error)
- })
- })
- },
-
- // 登出
- LogOut({ commit, state }) {
- return new Promise((resolve, reject) => {
- logout(state.token).then(() => {
- commit('SET_TOKEN', '')
- commit('SET_ROLES', [])
- removeToken()
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
- },
-
- // 前端 登出
- FedLogOut({ commit }) {
- return new Promise(resolve => {
- commit('SET_TOKEN', '')
- removeToken()
- resolve()
- })
- }
+ SET_AVATAR: (state, avatar) => {
+ state.avatar = avatar
+ },
+ SET_ROLES: (state, roles) => {
+ state.roles = roles
}
}
-export default user
+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)
+ })
+ })
+ },
+
+ // get user info
+ getInfo({ commit, state }) {
+ return new Promise((resolve, reject) => {
+ getInfo(state.token).then(response => {
+ const { data } = response
+
+ if (!data) {
+ reject('Verification failed, please Login again.')
+ }
+
+ const { roles, name, avatar } = data
+
+ // roles must be a non-empty array
+ if (!roles || roles.length <= 0) {
+ reject('getInfo: roles must be a non-null array!')
+ }
+
+ commit('SET_ROLES', roles)
+ commit('SET_NAME', name)
+ commit('SET_AVATAR', avatar)
+ resolve(data)
+ }).catch(error => {
+ reject(error)
+ })
+ })
+ },
+
+ // user logout
+ logout({ commit, state }) {
+ return new Promise((resolve, reject) => {
+ logout(state.token).then(() => {
+ commit('SET_TOKEN', '')
+ commit('SET_ROLES', [])
+ removeToken()
+ resetRouter()
+ resolve()
+ }).catch(error => {
+ reject(error)
+ })
+ })
+ },
+
+ // remove token
+ resetToken({ commit }) {
+ return new Promise(resolve => {
+ commit('SET_TOKEN', '')
+ commit('SET_ROLES', [])
+ removeToken()
+ resolve()
+ })
+ }
+}
+
+export default {
+ namespaced: true,
+ state,
+ mutations,
+ actions
+}
+
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index e60a687..6af3bfd 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -1,4 +1,10 @@
-//to reset element-ui default css
+// cover some element-ui styles
+
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+ font-weight: 400 !important;
+}
+
.el-upload {
input[type="file"] {
display: none !important;
@@ -9,7 +15,8 @@
display: none;
}
-//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+
+// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
@@ -17,7 +24,7 @@
margin: 0 auto;
}
-//element ui upload
+// refine element ui upload
.upload-container {
.el-upload {
width: 100%;
@@ -28,3 +35,10 @@
}
}
}
+
+// dropdown
+.el-dropdown-menu {
+ a {
+ display: block
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9af325d..3b4da51 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -31,19 +31,6 @@ html {
box-sizing: inherit;
}
-a,
-a:focus,
-a:hover {
- cursor: pointer;
- color: inherit;
- outline: none;
- text-decoration: none;
-}
-
-div:focus {
- outline: none;
-}
-
a:focus,
a:active {
outline: none;
@@ -57,6 +44,10 @@ a:hover {
text-decoration: none;
}
+div:focus {
+ outline: none;
+}
+
.clearfix {
&:after {
visibility: hidden;
@@ -68,11 +59,7 @@ a:hover {
}
}
-//main-container全局样式
-.app-main {
- min-height: 100%
-}
-
+// main-container global css
.app-container {
padding: 20px;
}
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 0344970..e55f865 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,6 +1,5 @@
#app {
- // 主体区域 Main container
.main-container {
min-height: 100%;
transition: margin-left .28s;
@@ -8,10 +7,10 @@
position: relative;
}
- // 侧边栏 Sidebar container
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
+ background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
@@ -21,23 +20,29 @@
z-index: 1001;
overflow: hidden;
- //reset element-ui css
+ // reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
-
- .el-scrollbar__view {
- height: 100%;
- }
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
+ .el-scrollbar {
+ height: 100%;
+ }
+
+ &.has-logo {
+ .el-scrollbar {
+ height: calc(100% - 50px);
+ }
+ }
+
.is-horizontal {
display: none;
}
@@ -100,6 +105,7 @@
.el-tooltip {
padding: 0 !important;
+
.svg-icon {
margin-left: 20px;
}
@@ -111,6 +117,7 @@
&>.el-submenu__title {
padding: 0 !important;
+
.svg-icon {
margin-left: 20px;
}
@@ -140,7 +147,7 @@
min-width: $sideBarWidth !important;
}
- // 适配移动端, Mobile responsive
+ // mobile responsive
.mobile {
.main-container {
margin-left: 0px;
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 1c4a4c5..4cb27cc 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,6 +1,6 @@
-//globl transition css
+// global transition css
-/*fade*/
+/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
@@ -11,7 +11,7 @@
opacity: 0;
}
-/*fade-transform*/
+/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
@@ -27,7 +27,7 @@
transform: translateX(30px);
}
-/*fade*/
+/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index fb19d5d..be55772 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,4 +1,4 @@
-//sidebar
+// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
new file mode 100644
index 0000000..a6de99d
--- /dev/null
+++ b/src/utils/get-page-title.js
@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+ if (pageTitle) {
+ return `${pageTitle} - ${title}`
+ }
+ return `${title}`
+}
diff --git a/src/utils/index.js b/src/utils/index.js
new file mode 100644
index 0000000..f18fccb
--- /dev/null
+++ b/src/utils/index.js
@@ -0,0 +1,90 @@
+/**
+ * Created by PanJiaChen on 16/11/18.
+ */
+
+/**
+ * Parse the time to string
+ * @param {(Object|string|number)} time
+ * @param {string} cFormat
+ * @returns {string}
+ */
+export function parseTime(time, cFormat) {
+ if (arguments.length === 0) {
+ return null
+ }
+ const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
+ let date
+ if (typeof time === 'object') {
+ date = time
+ } else {
+ if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
+ time = parseInt(time)
+ }
+ if ((typeof time === 'number') && (time.toString().length === 10)) {
+ time = time * 1000
+ }
+ date = new Date(time)
+ }
+ const formatObj = {
+ y: date.getFullYear(),
+ m: date.getMonth() + 1,
+ d: date.getDate(),
+ h: date.getHours(),
+ i: date.getMinutes(),
+ s: date.getSeconds(),
+ a: date.getDay()
+ }
+ const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+ let value = formatObj[key]
+ // Note: getDay() returns 0 on Sunday
+ if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
+ if (result.length > 0 && value < 10) {
+ value = '0' + value
+ }
+ return value || 0
+ })
+ return time_str
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+export function formatTime(time, option) {
+ if (('' + time).length === 10) {
+ time = parseInt(time) * 1000
+ } else {
+ time = +time
+ }
+ const d = new Date(time)
+ const now = Date.now()
+
+ const diff = (now - d) / 1000
+
+ if (diff < 30) {
+ return '刚刚'
+ } else if (diff < 3600) {
+ // less 1 hour
+ return Math.ceil(diff / 60) + '分钟前'
+ } else if (diff < 3600 * 24) {
+ return Math.ceil(diff / 3600) + '小时前'
+ } else if (diff < 3600 * 24 * 2) {
+ return '1天前'
+ }
+ if (option) {
+ return parseTime(time, option)
+ } else {
+ return (
+ d.getMonth() +
+ 1 +
+ '月' +
+ d.getDate() +
+ '日' +
+ d.getHours() +
+ '时' +
+ d.getMinutes() +
+ '分'
+ )
+ }
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 7744512..bc346a8 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,62 +1,74 @@
import axios from 'axios'
-import { Message, MessageBox } from 'element-ui'
-import store from '../store'
+import { MessageBox, Message } from 'element-ui'
+import store from '@/store'
import { getToken } from '@/utils/auth'
-// 创建axios实例
+// create an axios instance
const service = axios.create({
- baseURL: process.env.BASE_API, // api 的 base_url
- timeout: 5000 // 请求超时时间
+ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+ withCredentials: true, // send cookies when cross-domain requests
+ timeout: 5000 // request timeout
})
-// request拦截器
+// request interceptor
service.interceptors.request.use(
config => {
+ // do something before request is sent
+
if (store.getters.token) {
- config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+ // let each request carry token
+ // ['X-Token'] is a custom headers key
+ // please modify it according to the actual situation
+ config.headers['X-Token'] = getToken()
}
return config
},
error => {
- // Do something with request error
+ // do something with request error
console.log(error) // for debug
- Promise.reject(error)
+ return Promise.reject(error)
}
)
-// response 拦截器
+// response interceptor
service.interceptors.response.use(
+ /**
+ * If you want to get http information such as headers or status
+ * Please return response => response
+ */
+
+ /**
+ * Determine the request status by custom code
+ * Here is just an example
+ * You can also judge the status by HTTP Status Code
+ */
response => {
- /**
- * code为非20000是抛错 可结合自己业务进行修改
- */
const res = response.data
+
+ // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
- message: res.message,
+ message: res.message || 'error',
type: 'error',
duration: 5 * 1000
})
- // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
+ // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
- MessageBox.confirm(
- '你已被登出，可以取消继续留在该页面，或者重新登录',
- '确定登出',
- {
- confirmButtonText: '重新登录',
- cancelButtonText: '取消',
- type: 'warning'
- }
- ).then(() => {
- store.dispatch('FedLogOut').then(() => {
- location.reload() // 为了重新实例化vue-router对象 避免bug
+ // to re-login
+ MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+ confirmButtonText: 'Re-Login',
+ cancelButtonText: 'Cancel',
+ type: 'warning'
+ }).then(() => {
+ store.dispatch('user/resetToken').then(() => {
+ location.reload()
})
})
}
- return Promise.reject('error')
+ return Promise.reject(res.message || 'error')
} else {
- return response.data
+ return res
}
},
error => {
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 122603a..8d962ad 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -1,12 +1,20 @@
/**
- * Created by jiachenpan on 16/11/18.
+ * Created by PanJiaChen on 16/11/18.
*/
-export function isvalidUsername(str) {
- const valid_map = ['admin', 'editor']
- return valid_map.indexOf(str.trim()) >= 0
-}
-
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
export function isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
}
+
+/**
+ * @param {string} str
+ * @returns {Boolean}
+ */
+export function validUsername(str) {
+ const valid_map = ['admin', 'editor']
+ return valid_map.indexOf(str.trim()) >= 0
+}
diff --git a/src/views/404.vue b/src/views/404.vue
index c3eafea..1791f55 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -9,12 +9,12 @@
+
+
+ ![]()
+
+
+ ![]()
+
+
+
+
+
+
+
+
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
similarity index 82%
rename from src/views/layout/components/Sidebar/SidebarItem.vue
rename to src/layout/components/Sidebar/SidebarItem.vue
index b9d3819..2d49dd8 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -1,27 +1,26 @@
@@ -30,10 +29,12 @@ import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
+import FixiOSBug from './FixiOSBug'
export default {
name: 'SidebarItem',
components: { Item, AppLink },
+ mixins: [FixiOSBug],
props: {
// route object
item: {
@@ -84,6 +85,9 @@ export default {
if (isExternal(routePath)) {
return routePath
}
+ if (isExternal(this.basePath)) {
+ return this.basePath
+ }
return path.resolve(this.basePath, routePath)
}
}
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
new file mode 100644
index 0000000..fb014a2
--- /dev/null
+++ b/src/layout/components/Sidebar/index.vue
@@ -0,0 +1,54 @@
+
+ {{ title }}
+{{ title }}
+
+
+
+
+
+
+
+
+
diff --git a/src/views/layout/components/index.js b/src/layout/components/index.js
similarity index 100%
rename from src/views/layout/components/index.js
rename to src/layout/components/index.js
diff --git a/src/views/layout/Layout.vue b/src/layout/index.vue
similarity index 66%
rename from src/views/layout/Layout.vue
rename to src/layout/index.vue
index d306586..aa67907 100644
--- a/src/views/layout/Layout.vue
+++ b/src/layout/index.vue
@@ -1,10 +1,12 @@
-
-
@@ -28,6 +30,9 @@ export default {
device() {
return this.$store.state.app.device
},
+ fixedHeader() {
+ return this.$store.state.settings.fixedHeader
+ },
classObj() {
return {
hideSidebar: !this.sidebar.opened,
@@ -45,8 +50,10 @@ export default {
}
-
diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js
new file mode 100644
index 0000000..e8d0df8
--- /dev/null
+++ b/src/layout/mixin/ResizeHandler.js
@@ -0,0 +1,45 @@
+import store from '@/store'
+
+const { body } = document
+const WIDTH = 992 // refer to Bootstrap's responsive design
+
+export default {
+ watch: {
+ $route(route) {
+ if (this.device === 'mobile' && this.sidebar.opened) {
+ store.dispatch('app/closeSideBar', { withoutAnimation: false })
+ }
+ }
+ },
+ beforeMount() {
+ window.addEventListener('resize', this.$_resizeHandler)
+ },
+ beforeDestroy() {
+ window.removeEventListener('resize', this.$_resizeHandler)
+ },
+ mounted() {
+ const isMobile = this.$_isMobile()
+ if (isMobile) {
+ store.dispatch('app/toggleDevice', 'mobile')
+ store.dispatch('app/closeSideBar', { withoutAnimation: true })
+ }
+ },
+ methods: {
+ // use $_ for mixins properties
+ // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+ $_isMobile() {
+ const rect = body.getBoundingClientRect()
+ return rect.width - 1 < WIDTH
+ },
+ $_resizeHandler() {
+ if (!document.hidden) {
+ const isMobile = this.$_isMobile()
+ store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+
+ if (isMobile) {
+ store.dispatch('app/closeSideBar', { withoutAnimation: true })
+ }
+ }
+ }
+ }
+}
diff --git a/src/main.js b/src/main.js
index ed4e355..4ba95a7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,15 +16,15 @@ import '@/icons' // icon
import '@/permission' // permission control
/**
- * This project originally used easy-mock to simulate data,
- * but its official service is very unstable,
- * and you can build your own service if you need it.
- * So here I use Mock.js for local emulation,
- * it will intercept your request, so you won't see the request in the network.
- * If you remove `../mock` it will automatically request easy-mock data.
+ * If you don't want to use mock-server
+ * you want to use mockjs for request interception
+ * you can execute:
+ *
+ * import { mockXHR } from '../mock'
+ * mockXHR()
*/
-import '../mock' // simulation data
+// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
Vue.config.productionTip = false
diff --git a/src/permission.js b/src/permission.js
index 18abdb6..3d08d6b 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,43 +1,74 @@
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 { Message } from 'element-ui'
-import { getToken } from '@/utils/auth' // getToken from cookie
+import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
-NProgress.configure({ showSpinner: false })// NProgress configuration
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
-const whiteList = ['/login'] // 不重定向白名单
-router.beforeEach((to, from, next) => {
+const whiteList = ['/login'] // no redirect whitelist
+
+router.beforeEach(async(to, from, next) => {
+ // start progress bar
NProgress.start()
- if (getToken()) {
+
+ // 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() // if current page is dashboard will not trigger afterEach hook, so manually handle it
+ NProgress.done()
} else {
- if (store.getters.roles.length === 0) {
- store.dispatch('GetInfo').then(res => { // 拉取用户信息
- next()
- }).catch((err) => {
- store.dispatch('FedLogOut').then(() => {
- Message.error(err || 'Verification failed, please login again')
- next({ path: '/' })
- })
- })
- } 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 {
- next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
+ // other pages that do not have permission to access are redirected to the login page.
+ next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
- NProgress.done() // 结束Progress
+ // finish progress bar
+ NProgress.done()
})
diff --git a/src/router/index.js b/src/router/index.js
index 3e74077..b572aac 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,40 +1,57 @@
import Vue from 'vue'
import Router from 'vue-router'
-// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
-// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
-
Vue.use(Router)
/* Layout */
-import Layout from '../views/layout/Layout'
+import Layout from '@/layout'
/**
-* hidden: true if `hidden:true` will not show in the sidebar(default is false)
-* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
-* if not set alwaysShow, only more than one route under the children
-* it will becomes nested mode, otherwise not show the root menu
-* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
-* name:'router-name' the name is used by
-
OOPS!
- 版权所有
- 华尔街见闻
+
All rights reserved
+ wallstreetcn
{{ message }}
- 请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
- 返回首页
+ Please check that the URL you entered is correct, or click the button below to return to the homepage.
+ Back to home
vue-admin-template
+ +
+
+
Login Form
+
username: admin
- password: admin
+ password: any
+