From c4916839772b66206f90863fd67f19102ff72c54 Mon Sep 17 00:00:00 2001 From: hiant Date: Fri, 19 May 2017 12:49:29 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9F=BA=E4=BA=8Evue-router?= =?UTF-8?q?=EF=BC=8Cvuex=E7=9A=84=E6=9D=83=E9=99=90=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E7=94=A8mockjs=E6=A8=A1=E6=8B=9F=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E5=8F=8A=E6=9D=83=E9=99=90=E6=95=B0=E6=8D=AE=EF=BC=8C?= =?UTF-8?q?=E7=94=B1=E4=BA=8E=E6=98=AF=E9=9A=8F=E6=9C=BA=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=EF=BC=8C=E5=A6=82=E6=9E=9C=E9=81=87=E5=88=B0=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E5=A4=B1=E8=B4=A5=E8=AF=B7=E9=87=8D=E8=AF=95=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/components/common/Header.vue | 4 +- src/components/common/Sidebar.vue | 2 +- src/components/page/Login.vue | 73 ++++++++++++++++++++----------- src/main.js | 7 ++- src/mock/index.js | 5 ++- src/mock/user.js | 23 ++++++++++ src/router/index.js | 28 +++++++++++- src/store.js | 21 +++++++++ 9 files changed, 131 insertions(+), 35 deletions(-) create mode 100644 src/mock/user.js create mode 100644 src/store.js diff --git a/package.json b/package.json index b654cef..e8d1e59 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,8 @@ "vue-echarts-v3": "1.0.3", "vue-quill-editor": "2.1.6", "vue-router": "^2.3.1", - "vue-simplemde": "0.3.8" + "vue-simplemde": "0.3.8", + "vuex": "^2.2.1" }, "devDependencies": { "autoprefixer": "^6.7.2", diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index ff4f289..83e4a9d 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -23,14 +23,14 @@ }, computed:{ username(){ - let username = localStorage.getItem('ms_username'); + let username = this.$store.state.user.username; return username ? username : this.name; } }, methods:{ handleCommand(command) { if(command == 'loginout'){ - localStorage.removeItem('ms_username') + this.$store.commit('logout'); this.$router.push('/login'); } } diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index b1f87dd..d3b9ff5 100644 --- a/src/components/common/Sidebar.vue +++ b/src/components/common/Sidebar.vue @@ -5,7 +5,7 @@ diff --git a/src/components/page/Login.vue b/src/components/page/Login.vue index aa3c17d..4a9e72f 100644 --- a/src/components/page/Login.vue +++ b/src/components/page/Login.vue @@ -7,7 +7,8 @@ - +
登录 @@ -20,7 +21,7 @@ \ No newline at end of file + diff --git a/src/main.js b/src/main.js index 6472eb8..703c770 100644 --- a/src/main.js +++ b/src/main.js @@ -7,9 +7,14 @@ import 'element-ui/lib/theme-default/index.css'; // 默认主题 // import '../static/css/theme-green/index.css'; // 浅绿色主题 import "babel-polyfill"; import './mock/index.js'; +import qs from 'qs'; +import store from 'store'; Vue.use(ElementUI); Vue.prototype.$axios = axios; +Vue.prototype.$qs = qs; +Vue.prototype.$store = store; + new Vue({ router, render: h => h(App) -}).$mount('#app'); \ No newline at end of file +}).$mount('#app'); diff --git a/src/mock/index.js b/src/mock/index.js index 2300863..d53de4f 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -1,11 +1,12 @@ import Mock from 'mockjs'; import {vuetable} from './vuetable.js'; import {datasource} from './datasource.js'; +import {user} from './user.js'; -let data = [].concat(vuetable,datasource); +let data = [].concat(vuetable,datasource,user); data.forEach(function(res){ Mock.mock(res.path, res.data); }); -export default Mock; \ No newline at end of file +export default Mock; diff --git a/src/mock/user.js b/src/mock/user.js new file mode 100644 index 0000000..807c215 --- /dev/null +++ b/src/mock/user.js @@ -0,0 +1,23 @@ +export const user = [ + { + path: '/api/user', + data: { + 'errno|0-1': 1, + 'errmsg': function () { + if (this.errno == 1) { + return '用户名或密码错误'; + } + return ''; + }, + 'user': { + "id": "@natural", + "username": "@cname", + "auth": function () { + var base = ["/basetable", "/vuetable", "/baseform", "/vueeditor", "/markdown", "/upload", "/basecharts", "/mixcharts"] + var start = Math.floor(Math.random() * (base.length - 1)) + return ["/", "/login", "/logout", "/readme"].concat(base.slice(-start)); + } + } + } + } +] diff --git a/src/router/index.js b/src/router/index.js index bc21a26..e78906c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -3,7 +3,7 @@ import Router from 'vue-router'; Vue.use(Router); -export default new Router({ +const router = new Router({ routes: [ { path: '/', @@ -12,7 +12,7 @@ export default new Router({ { path: '/readme', component: resolve => require(['../components/common/Home.vue'], resolve), - children:[ + children: [ { path: '/', component: resolve => require(['../components/page/Readme.vue'], resolve) @@ -57,3 +57,27 @@ export default new Router({ }, ] }) + +router.beforeEach((to, from, next) => { + + if (to.path === '/login' || to.name === 'login') { + next() + } else { + var user = router.app.$store.state.user + // 通过state获取权限，登录成功时，获取列表 + if (!user.id) { + return next({path: '/login'}) + } + var auth = user.auth.some(auth => to.path == auth); + + if (!auth) { + router.app.$alert('没有权限', '错误', { + confirmButtonText: '确定' + }) + } + next(auth) + } + +}) + +export default router diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..ed7eb26 --- /dev/null +++ b/src/store.js @@ -0,0 +1,21 @@ +/** + * Created by Administrator on 2017.05.16. + */ +import Vue from 'vue'; +import Vuex from 'vuex' + +Vue.use(Vuex) + +export default new Vuex.Store({ + state: { + user: {} + }, + mutations: { + login (state, user) { + state.user = user; + }, + logout (state) { + state.user = {}; + } + } +})