update login page

木子李·De 3 years ago
parent 15b8360a88
commit 081c2a9d9a

@ -1,9 +1,8 @@
import request from './axios'
export function login (data) {
console.log(data)
return request({
url: '/login',
url: 'accessUser/login',
method: 'post',
data
})
@ -11,7 +10,7 @@ export function login (data) {
export function logout () {
return request({
url: '/accessUser/logout',
url: 'accessUser/logout',
method: 'post'
})
}
@ -22,11 +21,3 @@ export const reqUpdatePassword = data => request({
method: 'post',
data: data
})
export function queryForCodeSelect (params = {}) {
return request({
url: '/auth-service/dict/queryForCodeSelect',
method: 'post',
data: params
})
}

@ -1,62 +1,44 @@
import { setItem, getItem } from '@/utils/storage';
export default {
data() {
data () {
return {
}
},
computed: {
username: function(){
var username = getItem('username')
return username
operator: function () {
var operator = getItem('loginName')
return operator
},
getUser: function(){
getUser: function () {
// var user = getItem('user');
var user =JSON.parse(localStorage.getItem('user'))
if(user != null ){
var user = JSON.parse(localStorage.getItem('user'))
if (user != null) {
return user;
}else{
} else {
return {};
}
},
isAdmin() {
if (this.getUser == null) {
return false
}
return this.getUser.userId === 1
},
opLoginName() {
return this.getUser == null ? '' : this.getUser.userName
},
opNikeName() {
return this.getUser == null ? '' : this.getUser.nikeName
},
opUserType() {
return this.getUser == null ? '' : this.getUser.userType
},
opAuthorities() {
opAuthorities () {
return this.getUser == null ? [] : this.getUser.authorityWithOrgIds
}
},
created() {
created () {
},
mounted() {
mounted () {
},
destroyed() {
destroyed () {
},
methods: {
hasPermission(permissionStr, orgIds) {
hasPermission (permissionStr, orgIds) {
//判断用户权限列表是否为空
if (this.opAuthorities == null) {
return false
}
if(this.isAdmin){
return true;
if (this.opAuthorities == null) {
return false
}
if(permissionStr && permissionStr.indexOf('|') !== -1) {
if (permissionStr && permissionStr.indexOf('|') !== -1) {
let flag = false
let arr = permissionStr.split('|')
for(let i=0; i< arr.length; i++) {
for (let i = 0; i < arr.length; i++) {
let a = arr[i].replace(/(^\s*)|(\s*$)/g, "");
if (this.opAuthorities.hasOwnProperty(a)) {
flag = true
@ -66,22 +48,22 @@ export default {
}
//登录用户没有某个操作权限
if (!this.opAuthorities.hasOwnProperty(permissionStr)) {
return false
return false
}
//如果当前验证,不包含项目级别验证,直接返回
if (typeof(orgIds) == 'undefined' || orgIds == null) {
if (typeof (orgIds) == 'undefined' || orgIds == null) {
return true
}
}
//验证登录用户是否有某个项目的有操作权限
var orgIdsHasPermission = this.opAuthorities[permissionStr]
//如果projectIds是个数字只要验证登录用户是否有该项目的操作权限
if (typeof orgIds == 'number') {
if (orgIdsHasPermission.indexOf(orgIds) > -1) {
return true
}else{
} else {
return false
}
}else{
} else {
var result = false
for (var i in orgIdsHasPermission) {
var flag = orgIds.indexOf(orgIdsHasPermission[i]) > -1
@ -92,27 +74,5 @@ export default {
return result
}
},
//从所有字典中,取某个字典的列表
getDict(dictname){
var basecode = JSON.parse(localStorage.getItem('queryForCodeSelect'));
var dictList = basecode[dictname]
return dictList;
},
//从某个字典的列表,获取某个字典对象
getDictCode(dictname, codeValue , value='value'){
//如果 codeValue传过来的是字符串 all 则字典数组返回
var dictList = this.getDict(dictname);
for (var i = 0; i < dictList.length; i++) {
var codeItem = dictList[i]
if(codeItem[value] == codeValue){
return codeItem;
}
if(codeValue =='all'){
return dictList
}
}
return {};
},
}
}

@ -1,17 +1,23 @@
<template>
<div>
<el-menu class="navbar" mode="horizontal">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container" />
<el-menu class="navbar"
mode="horizontal">
<hamburger :toggle-click="toggleSideBar"
:is-active="sidebar.opened"
class="hamburger-container" />
<breadcrumb />
<el-dropdown class="avatar-container" trigger="click">
<el-dropdown class="avatar-container"
trigger="click">
<div class="avatar-wrapper">
<i class="icon iconfont iconyonghu user" />
<span class="user-name">{{ username }}</span>
<span class="user-name">{{ operator }}</span>
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-menu slot="dropdown"
class="user-dropdown">
<el-dropdown-item divided>
<span style="display:block;" @click="logout"></span>
<span style="display:block;"
@click="logout">注销登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -28,7 +34,7 @@ import { aesEncrypt } from '@/utils/aes'
import { reqUpdatePassword } from '@/api/login'
export default {
data() {
data () {
//
var validatePass3 = (rule, value, callback) => {
if (value === '') {
@ -80,12 +86,12 @@ export default {
computed: {
...mapGetters(['sidebar']),
},
created() {},
created () { },
methods: {
toggleSideBar() {
toggleSideBar () {
this.$store.dispatch('ToggleSideBar')
},
logout() {
logout () {
this.$confirm('确定要退出吗', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@ -98,14 +104,14 @@ export default {
})
},
//
updatePassword() {
updatePassword () {
this.wordVisible = true
this.$nextTick(() => {
this.$refs.form && this.$refs.form.resetFields()
})
},
//
confrimUpdate() {
confrimUpdate () {
this.$refs.form.validate((valid) => {
if (valid) {
const { oldPassword, password, confirmPassword } = this.form
@ -129,7 +135,7 @@ export default {
}
})
},
helpCenter() {
helpCenter () {
let helpCategory = JSON.parse(localStorage.getItem('helpCategory'))
this.$router.push({
path: '/helpCenList/list',

@ -8,11 +8,20 @@
<div class="login_container">
<!-- 顶部logo -->
<div class="login_title">
<img src="@/assets/images/home-logo.png" alt="logo" />
<img src="@/assets/images/home-logo.png"
alt="logo" />
</div>
<div class="login_contant">
<img src="@/assets/images/login.png" alt="image" class="login_img" />
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login_form" autocomplete="on" label-position="left" @keyup.enter.native="handleLogin">
<img src="@/assets/images/login.png"
alt="image"
class="login_img" />
<el-form ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login_form"
autocomplete="on"
label-position="left"
@keyup.enter.native="handleLogin">
<div class="title_container">
<h3 class="title">
HELLO,
@ -27,17 +36,42 @@
<b />
<div>
<p>用户名</p>
<el-form-item prop="username">
<el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" @focus="setTop('0')" @change="getPsw" />
<el-form-item prop="loginName">
<el-input ref="loginName"
v-model="loginForm.loginName"
placeholder="用户名"
name="loginName"
type="text"
tabindex="1"
autocomplete="on"
@focus="setTop('0')"
@change="getPsw" />
</el-form-item>
</div>
<div>
<p>密码</p>
<input name="password" type="password" autocomplete="off" class="take" />
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<input name="password"
type="password"
autocomplete="off"
class="take" />
<el-tooltip v-model="capsTooltip"
content="Caps lock is On"
placement="right"
manual>
<el-form-item prop="password">
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="用户密码" name="password" tabindex="2" autocomplete="on" @blur="capsTooltip = false" @focus="setTop('50')" @keyup.native="checkCapslock" />
<span class="show_pwd" @click="showPwd">
<el-input :key="passwordType"
ref="password"
v-model="loginForm.password"
:type="passwordType"
placeholder="用户密码"
name="password"
tabindex="2"
autocomplete="on"
@blur="capsTooltip = false"
@focus="setTop('50')"
@keyup.native="checkCapslock" />
<span class="show_pwd"
@click="showPwd">
<i class="el-icon-view" />
</span>
</el-form-item>
@ -46,15 +80,23 @@
</div>
<div class="control">
<div class="remember">
<input v-model="rememberPsw" type="checkbox" />
<input v-model="rememberPsw"
type="checkbox" />
<p>记住密码</p>
</div>
</div>
<el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="handleLogin">登录</el-button>
<el-button :loading="loading"
type="primary"
class="login_btn"
@click.native.prevent="handleLogin">登录</el-button>
</el-form>
</div>
<!-- 验证码 -->
<Verify v-if="needCaptcha" ref="verify" :captcha-type="'blockPuzzle'" :img-size="{ width: '400px', height: '200px' }" @success="verifylogin" />
<Verify v-if="needCaptcha"
ref="verify"
:captcha-type="'blockPuzzle'"
:img-size="{ width: '400px', height: '200px' }"
@success="verifylogin" />
</div>
</template>
@ -70,17 +112,17 @@ export default {
components: {
Verify,
},
data() {
data () {
return {
activeTop: '-50%', //
rememberPsw: false, //
loginForm: {
username: 'admin',
loginName: 'admin',
password: '123456',
verifyCode: '',
}, //
loginRules: {
username: [{ required: true, message: '用户名必填', trigger: 'blur' }],
loginName: [{ required: true, message: '用户名必填', trigger: 'blur' }],
password: [
{ required: true, message: '用户密码必填', trigger: 'blur' },
],
@ -106,31 +148,31 @@ export default {
immediate: true,
},
},
mounted() {
mounted () {
//
if (this.loginForm.username === '') {
this.$refs.username.focus()
if (this.loginForm.loginName === '') {
this.$refs.loginName.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
},
methods: {
//
getPsw() {
const cookVal = cookies.get(`u_${this.loginForm.username}`)
getPsw () {
const cookVal = cookies.get(`u_${this.loginForm.loginName}`)
this.loginForm.password = cookVal && Decrypt(cookVal)
},
// top
setTop(val) {
setTop (val) {
this.activeTop = val
},
//
checkCapslock(e) {
checkCapslock (e) {
const { key } = e
this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
},
//
showPwd() {
showPwd () {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
@ -141,7 +183,7 @@ export default {
})
},
//
useVerify() {
useVerify () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$refs.verify.show()
@ -151,14 +193,14 @@ export default {
})
},
//
verifylogin(params) {
verifylogin (params) {
this.loginForm.verifyCode = params.captchaVerification
if (this.loginForm.verifyCode) {
this.loginApi()
}
},
//
handleLogin() {
handleLogin () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true
@ -173,9 +215,9 @@ export default {
}
})
},
async loginApi() {
async loginApi () {
let obj = {
username: this.loginForm.username,
loginName: this.loginForm.loginName,
password: transPsw(this.loginForm.password),
verifyCode: '',
}
@ -184,11 +226,11 @@ export default {
this.loading = false
if (code != '200') return
setItem('token', data.token)
setItem('username', data.username)
setItem('loginName', data.loginName)
// cookie,15
this.rememberPsw &&
cookies.set(
`u_${this.loginForm.username}`,
`u_${this.loginForm.loginName}`,
Encrypt(this.loginForm.password),
{ expires: 15 }
)
@ -202,7 +244,7 @@ export default {
})
}
},
getOtherQuery(query) {
getOtherQuery (query) {
return Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
@ -381,7 +423,7 @@ export default {
height: 14px;
}
& > input:checked::before {
content: '\2713';
content: "\2713";
background-color: #f5ab1b;
position: absolute;
top: 0;

Loading…
Cancel
Save