增加基于vue-router，vuex的权限控制，使用mockjs模拟登录及权限数据，由于是随机数据，如果遇到登录失败请重试。
hiant
parent
f54ef21dc3
commit
c491683977
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<template v-if="item.subs">
|
||||
<el-submenu :index="item.index">
|
||||
<template slot="title"><i class="el-icon-menu"></i>{{ item.title }}</template>
|
||||
<el-menu-item v-for="subItem in item.subs" :index="subItem.index">{{ subItem.title }}
|
||||
<el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<el-input v-model="ruleForm.username" placeholder="username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" placeholder="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
|
||||
<el-input type="password" placeholder="password" v-model="ruleForm.password"
|
||||
@keyup.enter.native="submitForm('ruleForm')"></el-input>
|
||||
</el-form-item>
|
||||
<div class="login-btn">
|
||||
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
|
||||
|
|
@ -20,7 +21,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data: function(){
|
||||
data: function () {
|
||||
return {
|
||||
ruleForm: {
|
||||
username: '',
|
||||
|
|
@ -28,10 +29,10 @@
|
|||
},
|
||||
rules: {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' }
|
||||
{required: true, message: '请输入用户名', trigger: 'blur'}
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
{required: true, message: '请输入密码', trigger: 'blur'}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -41,10 +42,26 @@
|
|||
const self = this;
|
||||
self.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
localStorage.setItem('ms_username',self.ruleForm.username);
|
||||
self.$router.push('/readme');
|
||||
this.$axios.post('/api/user', this.$qs.stringify({
|
||||
'username': self.ruleForm.username,
|
||||
'password': self.ruleForm.password
|
||||
}))
|
||||
.then(function (response) {
|
||||
if (response.data['errno'] == 0) {
|
||||
self.$store.commit('login', response.data.user);
|
||||
self.$router.push('/readme');
|
||||
} else {
|
||||
self.$alert(response.data['errmsg'], '错误', {
|
||||
confirmButtonText: '确定'
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
self.$alert(error, '错误', {
|
||||
confirmButtonText: '确定'
|
||||
});
|
||||
});
|
||||
} else {
|
||||
console.log('error submit!!');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
|
@ -54,37 +71,41 @@
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-wrap{
|
||||
.login-wrap {
|
||||
position: relative;
|
||||
width:100%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ms-title{
|
||||
|
||||
.ms-title {
|
||||
position: absolute;
|
||||
top:50%;
|
||||
width:100%;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
margin-top: -230px;
|
||||
text-align: center;
|
||||
font-size:30px;
|
||||
font-size: 30px;
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.ms-login{
|
||||
|
||||
.ms-login {
|
||||
position: absolute;
|
||||
left:50%;
|
||||
top:50%;
|
||||
width:300px;
|
||||
height:160px;
|
||||
margin:-150px 0 0 -190px;
|
||||
padding:40px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 300px;
|
||||
height: 160px;
|
||||
margin: -150px 0 0 -190px;
|
||||
padding: 40px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
.login-btn{
|
||||
|
||||
.login-btn {
|
||||
text-align: center;
|
||||
}
|
||||
.login-btn button{
|
||||
width:100%;
|
||||
height:36px;
|
||||
|
||||
.login-btn button {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}).$mount('#app');
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
export default Mock;
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 = {};
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue