Commit 508d71474f01eb94f185082d8fbede933606e6a0
Exists in
master
Merge branch 'master' into 'master'
Master See merge request !4
Showing
7 changed files
Show diff stats
mock/mock-server.js
mock/user.js
1 | - | |
2 | 1 | const tokens = { |
3 | 2 | admin: { |
4 | 3 | token: 'admin-token' |
... | ... | @@ -6,8 +5,8 @@ const tokens = { |
6 | 5 | assistant: { |
7 | 6 | token: 'assistant-token' |
8 | 7 | }, |
9 | - editor: { | |
10 | - token: 'editor-token' | |
8 | + runner: { | |
9 | + token: 'runner-token' | |
11 | 10 | }, |
12 | 11 | shoper: { |
13 | 12 | token: 'shoper-token' |
... | ... | @@ -15,52 +14,60 @@ const tokens = { |
15 | 14 | } |
16 | 15 | |
17 | 16 | const users = { |
18 | - 'admin-token': {//管理员 | |
17 | + 'admin-token': { //管理员 | |
19 | 18 | roles: ['admin'], |
20 | 19 | introduction: 'I am a super administrator', |
21 | 20 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
22 | 21 | name: 'Super Admin' |
23 | 22 | }, |
24 | - 'assistant-token': {//管理员助理 | |
23 | + 'assistant-token': { //管理员助理 | |
25 | 24 | roles: ['assistant'], |
26 | 25 | introduction: 'I am a assistant of administrator', |
27 | 26 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
28 | - name: 'Super Admin' | |
27 | + name: 'assistant Admin' | |
29 | 28 | }, |
30 | - 'editor-token': {//运营人员 | |
31 | - roles: ['editor'], | |
32 | - introduction: 'I am an editor', | |
29 | + 'runner-token': { //运营人员 | |
30 | + roles: ['runner'], | |
31 | + introduction: 'I am an runner', | |
33 | 32 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
34 | - name: 'Normal Editor' | |
33 | + name: 'Normal runner' | |
35 | 34 | }, |
36 | - 'shoper-token': {//供应商 | |
35 | + 'shoper-token': { //供应商 | |
37 | 36 | roles: ['shoper'], |
38 | 37 | introduction: 'I am an shoper', |
39 | 38 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', |
40 | - name: 'Normal Editor' | |
39 | + name: 'Normal shoper' | |
41 | 40 | } |
42 | 41 | } |
43 | 42 | |
44 | -export default [ | |
45 | - // user login | |
46 | - { | |
43 | +export default [{ // user login | |
47 | 44 | url: '/yp/user/login', |
48 | 45 | type: 'post', |
49 | 46 | response: config => { |
50 | - const { username } = config.body | |
51 | - const token = tokens[username] | |
52 | - // mock error | |
53 | - if (!token) { | |
47 | + console.log('config-------->', config.body); | |
48 | + const { | |
49 | + username, | |
50 | + password | |
51 | + } = config.body; | |
52 | + if (username == 'admin' && password == '111111') { | |
53 | + const token = tokens[username]; | |
54 | + if (!token) { | |
55 | + return { | |
56 | + code: 60204, | |
57 | + message: 'Account and password are incorrect.' | |
58 | + } | |
59 | + } else { | |
60 | + return { | |
61 | + code: 20000, | |
62 | + data: token | |
63 | + } | |
64 | + } | |
65 | + } else { | |
54 | 66 | return { |
55 | 67 | code: 60204, |
56 | 68 | message: 'Account and password are incorrect.' |
57 | 69 | } |
58 | 70 | } |
59 | - | |
60 | - return { | |
61 | - code: 20000, | |
62 | - data: token | |
63 | - } | |
64 | 71 | } |
65 | 72 | }, |
66 | 73 | |
... | ... | @@ -69,7 +76,9 @@ export default [ |
69 | 76 | url: '/yp/user/info\.*', |
70 | 77 | type: 'get', |
71 | 78 | response: config => { |
72 | - const { token } = config.query | |
79 | + const { | |
80 | + token | |
81 | + } = config.query | |
73 | 82 | const info = users[token] |
74 | 83 | |
75 | 84 | // mock error | ... | ... |
src/api/user.js
1 | 1 | import request from '@/utils/request' |
2 | +// var qs = require('Qs'); | |
2 | 3 | |
3 | 4 | export function login(data) { |
4 | - console.log('login....', data) | |
5 | + console.log('login.1111...', data) | |
5 | 6 | return request({ |
6 | - url: '/yp/user/login', | |
7 | + // url: '/yp/user/login', | |
8 | + url: '/yp.user.login.php', | |
7 | 9 | method: 'post', |
8 | - data | |
9 | - }) | |
10 | + headers: { | |
11 | + 'Content-type': 'application/x-www-form-urlencoded' | |
12 | + }, | |
13 | + data, | |
14 | + // responseType: 'text/plain', | |
15 | + // onDownloadProgress: false, | |
16 | + // onUploadProgress: true, | |
17 | + // proxy: {} | |
18 | + }); | |
10 | 19 | } |
11 | 20 | |
12 | 21 | export function getInfo(token) { |
... | ... | @@ -14,7 +23,9 @@ export function getInfo(token) { |
14 | 23 | return request({ |
15 | 24 | url: '/yp/user/info', |
16 | 25 | method: 'get', |
17 | - params: { token } | |
26 | + params: { | |
27 | + token | |
28 | + } | |
18 | 29 | }) |
19 | 30 | } |
20 | 31 | |
... | ... | @@ -23,7 +34,9 @@ export function list(token) { |
23 | 34 | return request({ |
24 | 35 | url: '/yp/user/list', |
25 | 36 | method: 'get', |
26 | - params: { token } | |
37 | + params: { | |
38 | + token | |
39 | + } | |
27 | 40 | }) |
28 | 41 | } |
29 | 42 | |
... | ... | @@ -32,7 +45,9 @@ export function add(token) { |
32 | 45 | return request({ |
33 | 46 | url: '/yp/user/add', |
34 | 47 | method: 'get', |
35 | - params: { token } | |
48 | + params: { | |
49 | + token | |
50 | + } | |
36 | 51 | }) |
37 | 52 | } |
38 | 53 | |
... | ... | @@ -41,7 +56,9 @@ export function modi(token) { |
41 | 56 | return request({ |
42 | 57 | url: '/yp/user/modi', |
43 | 58 | method: 'get', |
44 | - params: { token } | |
59 | + params: { | |
60 | + token | |
61 | + } | |
45 | 62 | }) |
46 | 63 | } |
47 | 64 | ... | ... |
src/store/modules/user.js
... | ... | @@ -38,6 +38,7 @@ const actions = { |
38 | 38 | return new Promise((resolve, reject) => { |
39 | 39 | login({ username: username.trim(), password: password }).then(response => { |
40 | 40 | const { data } = response |
41 | + console.log('action------->login------->处理', data); | |
41 | 42 | commit('SET_TOKEN', data.token) |
42 | 43 | setToken(data.token) |
43 | 44 | resolve() |
... | ... | @@ -52,18 +53,14 @@ const actions = { |
52 | 53 | return new Promise((resolve, reject) => { |
53 | 54 | getInfo(state.token).then(response => { |
54 | 55 | const { data } = response |
55 | - | |
56 | 56 | if (!data) { |
57 | 57 | reject('Verification failed, please Login again.') |
58 | 58 | } |
59 | - | |
60 | 59 | const { roles, name, avatar } = data |
61 | - | |
62 | 60 | // roles must be a non-empty array |
63 | 61 | if (!roles || roles.length <= 0) { |
64 | 62 | reject('getInfo: roles must be a non-null array!') |
65 | 63 | } |
66 | - | |
67 | 64 | commit('SET_ROLES', roles) |
68 | 65 | commit('SET_NAME', name) |
69 | 66 | commit('SET_AVATAR', avatar) | ... | ... |
src/utils/request.js
1 | 1 | import axios from 'axios' |
2 | -import { MessageBox, Message } from 'element-ui' | |
2 | +import { | |
3 | + MessageBox, | |
4 | + Message | |
5 | +} from 'element-ui' | |
3 | 6 | import store from '@/store' |
4 | -import { getToken } from '@/utils/auth' | |
7 | +import { | |
8 | + getToken | |
9 | +} from '@/utils/auth' | |
5 | 10 | |
6 | 11 | // create an axios instance |
7 | 12 | // 创建axios实例 |
8 | 13 | const service = axios.create({ |
14 | + // baseURL: '', // url = base url + request url | |
9 | 15 | baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url |
10 | 16 | // withCredentials: true, // send cookies when cross-domain requests |
11 | - timeout: 5000 // request timeout | |
17 | + timeout: 5000, // request timeout | |
18 | + headers: { | |
19 | + 'Content-Type': 'application/x-www-form-urlencoded' | |
20 | + } | |
12 | 21 | }) |
13 | 22 | |
14 | 23 | // request interceptor |
... | ... | @@ -16,20 +25,23 @@ const service = axios.create({ |
16 | 25 | service.interceptors.request.use( |
17 | 26 | config => { |
18 | 27 | // do something before request is sent |
19 | - console.log('do something before request is sent') | |
28 | + // console.log('do something before request is sent') | |
20 | 29 | if (store.getters.token) { |
21 | - console.log('[X-Token] is a custom headers key') | |
30 | + // console.log('[X-Token] is a custom headers key') | |
22 | 31 | // let each request carry token |
23 | 32 | // ['X-Token'] is a custom headers key |
24 | 33 | // please modify it according to the actual situation |
25 | - config.headers['X-Token'] = getToken() | |
34 | + config.headers['X-Token'] = getToken(); | |
35 | + config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; | |
36 | + // var token = getToken() | |
37 | + // Object.assign(config.headers, { 'token': token }) | |
26 | 38 | } |
27 | 39 | return config |
28 | 40 | }, |
29 | 41 | error => { |
30 | - console.log('do something with request error') | |
42 | + // console.log('do something with request error') | |
31 | 43 | // do something with request error |
32 | - console.log(error) // for debug | |
44 | + console.error(error) // for debug | |
33 | 45 | return Promise.reject(error) |
34 | 46 | } |
35 | 47 | ) |
... | ... | @@ -40,7 +52,7 @@ service.interceptors.response.use( |
40 | 52 | /** |
41 | 53 | * If you want to get http information such as headers or status |
42 | 54 | * Please return response => response |
43 | - */ | |
55 | + */ | |
44 | 56 | |
45 | 57 | /** |
46 | 58 | * Determine the request status by custom code |
... | ... | @@ -49,12 +61,12 @@ service.interceptors.response.use( |
49 | 61 | */ |
50 | 62 | response => { |
51 | 63 | const res = response.data |
64 | + console.log('返回的数据-------->', res); | |
52 | 65 | /** |
53 | - * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页 | |
54 | - * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中 | |
55 | - */ | |
56 | - console.log('if the custom code is not 20000, it is judged as an error.') | |
57 | - // if the custom code is not 20000, it is judged as an error. | |
66 | + * 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页 | |
67 | + * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中 | |
68 | + */ | |
69 | + // console.log('if the custom code is not 20000, it is judged as an error.') | |
58 | 70 | if (res.code !== 20000) { |
59 | 71 | Message({ |
60 | 72 | message: res.message || 'Error', |
... | ... | @@ -62,7 +74,6 @@ service.interceptors.response.use( |
62 | 74 | duration: 5 * 1000 |
63 | 75 | }) |
64 | 76 | |
65 | - // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; | |
66 | 77 | // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; |
67 | 78 | if (res.code === 50008 || res.code === 50012 || res.code === 50014) { |
68 | 79 | // to re-login |
... | ... | @@ -75,17 +86,19 @@ service.interceptors.response.use( |
75 | 86 | type: 'warning' |
76 | 87 | }).then(() => { |
77 | 88 | store.dispatch('user/resetToken').then(() => { |
78 | - location.reload()// 为了重新实例化vue-router对象 避免bug | |
89 | + location.reload() // 为了重新实例化vue-router对象 避免bug | |
79 | 90 | }) |
80 | 91 | }) |
81 | 92 | } |
82 | 93 | return Promise.reject(new Error(res.message || 'Error')) |
83 | 94 | } else { |
84 | - return res | |
95 | + // const token = res.data.token; | |
96 | + console.log('进入20000号判断-------->', res); | |
97 | + return res; | |
85 | 98 | } |
86 | 99 | }, |
87 | 100 | error => { |
88 | - console.log('err' + error) // for debug | |
101 | + console.error('===============发生错误!!!!!===============' + error) // for debug | |
89 | 102 | Message({ |
90 | 103 | message: error.message, |
91 | 104 | type: 'error', | ... | ... |
src/views/login/index.vue
1 | 1 | <template> |
2 | 2 | <div class="login-container"> |
3 | - <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> | |
4 | - | |
3 | + <el-form | |
4 | + ref="loginForm" | |
5 | + :model="loginForm" | |
6 | + :rules="loginRules" | |
7 | + class="login-form" | |
8 | + auto-complete="on" | |
9 | + label-position="left" | |
10 | + > | |
5 | 11 | <div class="title-container"> |
6 | - <h3 class="title">Login Form</h3> | |
12 | + <h3 class="title">鱼皮系统</h3> | |
7 | 13 | </div> |
8 | 14 | |
9 | 15 | <el-form-item prop="username"> |
... | ... | @@ -41,96 +47,109 @@ |
41 | 47 | </span> |
42 | 48 | </el-form-item> |
43 | 49 | <!-- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">reg</el-button> --> |
44 | - <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> | |
50 | + <el-button | |
51 | + :loading="loading" | |
52 | + type="primary" | |
53 | + style="width:100%;margin-bottom:30px;" | |
54 | + @click.native.prevent="handleLogin" | |
55 | + >Login</el-button> | |
45 | 56 | |
46 | 57 | <div class="tips"> |
47 | 58 | <span style="margin-right:20px;">username: admin</span> |
48 | - <span> password: any</span> | |
59 | + <span>password: any</span> | |
49 | 60 | </div> |
50 | - | |
51 | 61 | </el-form> |
52 | 62 | </div> |
53 | 63 | </template> |
54 | 64 | |
55 | 65 | <script> |
56 | -import { validUsername } from '@/utils/validate' | |
66 | +import { validUsername } from "@/utils/validate"; | |
57 | 67 | |
58 | 68 | export default { |
59 | - name: 'Login', | |
69 | + name: "Login", | |
60 | 70 | data() { |
61 | 71 | const validateUsername = (rule, value, callback) => { |
62 | 72 | if (!validUsername(value)) { |
63 | - callback(new Error('Please enter the correct user name')) | |
73 | + callback(new Error("Please enter the correct user name")); | |
64 | 74 | } else { |
65 | - callback() | |
75 | + callback(); | |
66 | 76 | } |
67 | - } | |
77 | + }; | |
68 | 78 | const validatePassword = (rule, value, callback) => { |
69 | 79 | if (value.length < 6) { |
70 | - callback(new Error('The password can not be less than 6 digits')) | |
80 | + callback(new Error("The password can not be less than 6 digits")); | |
71 | 81 | } else { |
72 | - callback() | |
82 | + callback(); | |
73 | 83 | } |
74 | - } | |
84 | + }; | |
75 | 85 | return { |
76 | 86 | loginForm: { |
77 | - username: 'admin', | |
78 | - password: '111111' | |
87 | + username: "admin", | |
88 | + password: "111111" | |
79 | 89 | }, |
80 | 90 | loginRules: { |
81 | - username: [{ required: true, trigger: 'blur', validator: validateUsername }], | |
82 | - password: [{ required: true, trigger: 'blur', validator: validatePassword }] | |
91 | + username: [ | |
92 | + { required: true, trigger: "blur", validator: validateUsername } | |
93 | + ], | |
94 | + password: [ | |
95 | + { required: true, trigger: "blur", validator: validatePassword } | |
96 | + ] | |
83 | 97 | }, |
84 | 98 | loading: false, |
85 | - passwordType: 'password', | |
99 | + passwordType: "password", | |
86 | 100 | redirect: undefined |
87 | - } | |
101 | + }; | |
88 | 102 | }, |
89 | 103 | watch: { |
90 | 104 | $route: { |
91 | 105 | handler: function(route) { |
92 | - this.redirect = route.query && route.query.redirect | |
106 | + this.redirect = route.query && route.query.redirect; | |
93 | 107 | }, |
94 | 108 | immediate: true |
95 | 109 | } |
96 | 110 | }, |
97 | 111 | methods: { |
98 | 112 | showPwd() { |
99 | - if (this.passwordType === 'password') { | |
100 | - this.passwordType = '' | |
113 | + if (this.passwordType === "password") { | |
114 | + this.passwordType = ""; | |
101 | 115 | } else { |
102 | - this.passwordType = 'password' | |
116 | + this.passwordType = "password"; | |
103 | 117 | } |
104 | 118 | this.$nextTick(() => { |
105 | - this.$refs.password.focus() | |
106 | - }) | |
119 | + this.$refs.password.focus(); | |
120 | + }); | |
107 | 121 | }, |
108 | 122 | handleLogin() { |
109 | 123 | this.$refs.loginForm.validate(valid => { |
110 | 124 | if (valid) { |
111 | - this.loading = true | |
112 | - this.$store.dispatch('user/login', this.loginForm).then(() => { | |
113 | - this.$router.push({ path: this.redirect || '/' }) | |
114 | - this.loading = false | |
115 | - }).catch(() => { | |
116 | - this.loading = false | |
117 | - }) | |
125 | + this.loading = true; | |
126 | + this.$store | |
127 | + .dispatch("user/login", this.loginForm) | |
128 | + .then(() => { | |
129 | + this.$router.push({ path: this.redirect || "/" }); | |
130 | + this.loading = false; | |
131 | + console.log('this.redirect', this.$router); | |
132 | + }) | |
133 | + .catch(res => { | |
134 | + console.log("res error------------>", res); | |
135 | + this.loading = false; | |
136 | + }); | |
118 | 137 | } else { |
119 | - console.log('error submit!!') | |
120 | - return false | |
138 | + console.log("error submit!!"); | |
139 | + return false; | |
121 | 140 | } |
122 | - }) | |
141 | + }); | |
123 | 142 | } |
124 | 143 | } |
125 | -} | |
144 | +}; | |
126 | 145 | </script> |
127 | 146 | |
128 | 147 | <style lang="scss"> |
129 | 148 | /* 修复input 背景不协调 和光标变色 */ |
130 | 149 | /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ |
131 | 150 | |
132 | -$bg:#283443; | |
133 | -$light_gray:#fff; | |
151 | +$bg: #283443; | |
152 | +$light_gray: #fff; | |
134 | 153 | $cursor: #fff; |
135 | 154 | |
136 | 155 | @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { |
... | ... | @@ -173,9 +192,9 @@ $cursor: #fff; |
173 | 192 | </style> |
174 | 193 | |
175 | 194 | <style lang="scss" scoped> |
176 | -$bg:#2d3a4b; | |
177 | -$dark_gray:#889aa4; | |
178 | -$light_gray:#eee; | |
195 | +$bg: #2d3a4b; | |
196 | +$dark_gray: #889aa4; | |
197 | +$light_gray: #eee; | |
179 | 198 | |
180 | 199 | .login-container { |
181 | 200 | min-height: 100%; | ... | ... |
vue.config.js
... | ... | @@ -81,7 +81,7 @@ module.exports = { |
81 | 81 | .end() |
82 | 82 | |
83 | 83 | config |
84 | - // https://webpack.js.org/configuration/devtool/#development | |
84 | + // https://webpack.js.org/configuration/devtool/#development | |
85 | 85 | .when(process.env.NODE_ENV === 'development', |
86 | 86 | config => config.devtool('cheap-source-map') |
87 | 87 | ) |
... | ... | @@ -93,7 +93,7 @@ module.exports = { |
93 | 93 | .plugin('ScriptExtHtmlWebpackPlugin') |
94 | 94 | .after('html') |
95 | 95 | .use('script-ext-html-webpack-plugin', [{ |
96 | - // `runtime` must same as runtimeChunk name. default is `runtime` | |
96 | + // `runtime` must same as runtimeChunk name. default is `runtime` | |
97 | 97 | inline: /runtime\..*\.js$/ |
98 | 98 | }]) |
99 | 99 | .end() | ... | ... |