后台登录页面调通

This commit is contained in:
aoshiguchen
2022-08-27 14:34:58 +08:00
parent cfb6f589da
commit 6c4deb15aa
13 changed files with 153 additions and 43 deletions
+5 -5
View File
@@ -1,12 +1,12 @@
import request from '@/utils/request'
export function loginByUsername(username, password) {
export function loginByUsername(loginName, loginPassword) {
const data = {
username,
password
loginName,
loginPassword
}
return request({
url: '/login/login',
url: '/login',
method: 'post',
data
})
@@ -14,7 +14,7 @@ export function loginByUsername(username, password) {
export function logout() {
return request({
url: '/login/logout',
url: '/logout',
method: 'post'
})
}
+8
View File
@@ -31,9 +31,17 @@ export function updateUser(data) {
})
}
export function currentUserInfo() {
return request({
url: '/user/info',
method: 'get'
})
}
export function hello() {
return request({
url: '/test1/hello',
method: 'GET'
})
}
+3 -4
View File
@@ -1,5 +1,4 @@
import Mock from 'mockjs'
import loginAPI from './login'
import articleAPI from './article'
import remoteSearchAPI from './remoteSearch'
import transactionAPI from './transaction'
@@ -10,9 +9,9 @@ import userAPI from './user'
// })
// 登录相关
Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
// Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
// Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
// Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
// 文章相关
Mock.mock(/\/article\/list/, 'get', articleAPI.getList)
+1 -1
View File
@@ -26,7 +26,7 @@ router.beforeEach((to, from, next) => {
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetUserInfo').then(res => { // 拉取user_info
const roles = res.data.roles // note: roles must be a array! such as: ['editor','develop']
const roles = [res.data.data.loginName] // note: roles must be a array! such as: ['editor','develop']
store.dispatch('GenerateRoutes', { roles }).then(() => { // 根据roles权限生成可访问的路由表
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
+7 -10
View File
@@ -1,4 +1,5 @@
import { loginByUsername, logout, getUserInfo } from '@/api/login'
import { currentUserInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
const user = {
@@ -49,10 +50,9 @@ const user = {
const username = userInfo.username.trim()
return new Promise((resolve, reject) => {
loginByUsername(username, userInfo.password).then(response => {
const data = response.data
commit('SET_TOKEN', data.token)
setToken(response.data.token)
resolve()
commit('SET_TOKEN', response.data.data.token)
setToken(response.data.data.token)
resolve(response)
}).catch(error => {
reject(error)
})
@@ -62,15 +62,12 @@ const user = {
// 获取用户信息
GetUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getUserInfo(state.token).then(response => {
currentUserInfo(state.token).then(response => {
if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
reject('error')
}
const data = response.data
commit('SET_ROLES', data.roles)
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
commit('SET_INTRODUCTION', data.introduction)
commit('SET_ROLES', [response.data.data.loginName])
commit('SET_NAME', response.data.data.name)
resolve(response)
}).catch(error => {
reject(error)
+2 -2
View File
@@ -1,6 +1,6 @@
import Cookies from 'js-cookie'
const TokenKey = 'Admin-Token'
window.Cookies = Cookies
const TokenKey = 'UserToken'
export function getToken() {
return Cookies.get(TokenKey)
+9 -2
View File
@@ -13,7 +13,7 @@ const service = axios.create({
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
config.headers['Authorize'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
}
return config
}, error => {
@@ -24,7 +24,14 @@ service.interceptors.request.use(config => {
// respone interceptor
service.interceptors.response.use(
response => response,
response => {
console.log('response', response)
const res = response.data
if (res.code !== 0) {
console.log('请求异常', response)
}
return response
},
/**
* 下面的注释为通过response自定义code来标示请求状态,当code返回如下情况为权限有问题,登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
+1 -2
View File
@@ -3,8 +3,7 @@
*/
export function isvalidUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
return str && str.length > 3
}
/* 合法uri*/
+11 -17
View File
@@ -8,14 +8,14 @@
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
<el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="密码" />
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye" />
</span>
@@ -24,7 +24,7 @@
<el-button type="primary" style="width:100%;margin-bottom:30px;" :loading="loading" @click.native.prevent="handleLogin">{{$t('login.logIn')}}</el-button>
<div class="tips">
<span>{{$t('login.username')}} : admin</span>
<span>{{$t('login.username')}} : visitor</span>
<span>{{$t('login.password')}} : 123456</span>
</div>
@@ -36,7 +36,6 @@
import { isvalidUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'
import SocialSign from './socialsignin'
import { login } from '@/api/system'
export default {
components: { LangSelect, SocialSign },
@@ -44,21 +43,21 @@ export default {
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('Please enter the correct user name'))
callback(new Error('请输入用户名'))
} else {
callback()
}
}
const validatePassword = (rule, value, callback) => {
if (value.length < 6) {
callback(new Error('The password can not be less than 6 digits'))
callback(new Error('密码不能少于6位'))
} else {
callback()
}
}
return {
loginForm: {
username: 'admin',
username: 'visitor',
password: '123456'
},
loginRules: {
@@ -82,16 +81,11 @@ export default {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
login({
loginName: this.loginForm.username,
loginPassword: this.loginForm.password
}).then(() => {
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')