登录新增类型

This commit is contained in:
gyq
2024-07-30 16:00:08 +08:00
parent d8b9d01aa7
commit 5d3fdd5acf
3 changed files with 127 additions and 101 deletions

View File

@@ -1,35 +1,30 @@
import request from '@/utils/request' import request from "@/utils/request";
export function login(username, password, code, uuid) { export function login(data) {
return request({ return request({
url: 'auth/login', url: "auth/login",
method: 'post', method: "post",
data: { data
username, });
password,
code,
uuid
}
})
} }
export function getInfo() { export function getInfo() {
return request({ return request({
url: 'auth/info', url: "auth/info",
method: 'get' method: "get"
}) });
} }
export function getCodeImg(header) { export function getCodeImg(header) {
return request({ return request({
url: 'auth/code', url: "auth/code",
method: 'get' method: "get"
}) });
} }
export function logout() { export function logout() {
return request({ return request({
url: 'auth/logout', url: "auth/logout",
method: 'delete' method: "delete"
}) });
} }

View File

@@ -1,5 +1,5 @@
import { login, getInfo, logout } from '@/api/login' import { login, getInfo, logout } from "@/api/login";
import { getToken, setToken, removeToken } from '@/utils/auth' import { getToken, setToken, removeToken } from "@/utils/auth";
const user = { const user = {
state: { state: {
@@ -13,91 +13,97 @@ const user = {
mutations: { mutations: {
// 是否为手动退出登录 // 是否为手动退出登录
SD_LOGOUT: (state, f) => { SD_LOGOUT: (state, f) => {
state.sdLogout = f state.sdLogout = f;
}, },
SET_TOKEN: (state, token) => { SET_TOKEN: (state, token) => {
state.token = token state.token = token;
}, },
SET_USER: (state, user) => { SET_USER: (state, user) => {
state.user = user state.user = user;
}, },
SET_ROLES: (state, roles) => { SET_ROLES: (state, roles) => {
state.roles = roles state.roles = roles;
}, },
SET_LOAD_MENUS: (state, loadMenus) => { SET_LOAD_MENUS: (state, loadMenus) => {
state.loadMenus = loadMenus state.loadMenus = loadMenus;
} }
}, },
actions: { actions: {
// 登录 // 登录
Login({ commit }, userInfo) { Login({ commit }, userInfo) {
const rememberMe = userInfo.rememberMe const rememberMe = userInfo.rememberMe;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => { login(userInfo)
// console.log('登录成功后返回===', res) .then(res => {
localStorage.setItem('logoutHandle', false) // console.log('登录成功后返回===', res)
localStorage.setItem('shopId', res.shopId) localStorage.setItem("logoutHandle", false);
localStorage.setItem('shopName', res.shopName) localStorage.setItem("shopId", res.shopId);
localStorage.setItem('logo', res.logo) localStorage.setItem("shopName", res.shopName);
setToken(res.token, rememberMe) localStorage.setItem("logo", res.logo);
commit('SET_TOKEN', res.token) setToken(res.token, rememberMe);
setUserInfo(res.user, commit) commit("SET_TOKEN", res.token);
// 第一次加载菜单时用到, 具体见 src 目录下的 permission.js setUserInfo(res.user, commit);
commit('SET_LOAD_MENUS', true) // 第一次加载菜单时用到, 具体见 src 目录下的 permission.js
resolve() commit("SET_LOAD_MENUS", true);
}).catch(error => { resolve();
reject(error) })
}) .catch(error => {
}) reject(error);
});
});
}, },
// 获取用户信息 // 获取用户信息
GetInfo({ commit }) { GetInfo({ commit }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getInfo().then(res => { getInfo()
setUserInfo(res, commit) .then(res => {
resolve(res) setUserInfo(res, commit);
}).catch(error => { resolve(res);
reject(error) })
}) .catch(error => {
}) reject(error);
});
});
}, },
// 登出 // 登出
LogOut({ commit }) { LogOut({ commit }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
logout().then(res => { logout()
logOut(commit) .then(res => {
resolve() logOut(commit);
}).catch(error => { resolve();
logOut(commit) })
reject(error) .catch(error => {
}) logOut(commit);
}) reject(error);
});
});
}, },
updateLoadMenus({ commit }) { updateLoadMenus({ commit }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
commit('SET_LOAD_MENUS', false) commit("SET_LOAD_MENUS", false);
}) });
} }
} }
} };
export const logOut = (commit) => { export const logOut = commit => {
commit('SET_TOKEN', '') commit("SET_TOKEN", "");
commit('SET_ROLES', []) commit("SET_ROLES", []);
removeToken() removeToken();
} };
export const setUserInfo = (res, commit) => { export const setUserInfo = (res, commit) => {
// 如果没有任何权限,则赋予一个默认的权限,避免请求死循环 // 如果没有任何权限,则赋予一个默认的权限,避免请求死循环
if (res.roles.length === 0) { if (res.roles.length === 0) {
commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT']) commit("SET_ROLES", ["ROLE_SYSTEM_DEFAULT"]);
} else { } else {
commit('SET_ROLES', res.roles) commit("SET_ROLES", res.roles);
} }
commit('SET_USER', res.user) commit("SET_USER", res.user);
} };
export default user export default user;

View File

@@ -5,6 +5,17 @@
<h3 class="title"> <h3 class="title">
银收客后台管理 银收客后台管理
</h3> </h3>
<el-form-item>
<el-radio-group v-model="loginForm.loginType">
<el-radio-button label="merchant">商户</el-radio-button>
<el-radio-button label="staff">员工</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item prop="merchantName" v-if="loginForm.loginType == 'staff'">
<el-input v-model="loginForm.merchantName" type="text" auto-complete="off" placeholder="商户号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -27,9 +38,11 @@
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;"> <!-- <el-form-item>
记住我 <el-checkbox v-model="loginForm.rememberMe">
</el-checkbox> 记住我
</el-checkbox>
</el-form-item> -->
<el-form-item style="width:100%;"> <el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin"> @click.native.prevent="handleLogin">
@@ -66,12 +79,15 @@ export default {
password: '', password: '',
rememberMe: false, rememberMe: false,
code: '', code: '',
uuid: '' uuid: '',
merchantName: '',
loginType: 'merchant'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }], password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }] code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
merchantName: [{ required: true, trigger: 'change', message: '商户号不能为空' }]
}, },
loading: false, loading: false,
redirect: undefined redirect: undefined
@@ -95,10 +111,10 @@ export default {
created() { created() {
// 获取验证码 // 获取验证码
this.getCode() this.getCode()
// 获取用户名密码等Cookie // // 获取用户名密码等Cookie
this.getCookie() // this.getCookie()
// token 过期提示 // // token 过期提示
this.point() // this.point()
}, },
methods: { methods: {
getCode() { getCode() {
@@ -119,32 +135,39 @@ export default {
username: username === undefined ? this.loginForm.username : username, username: username === undefined ? this.loginForm.username : username,
password: password, password: password,
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
code: '' code: '',
merchantName: '',
loginType: 'merchant'
} }
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {
const user = { // const user = {
username: this.loginForm.username, // username: this.loginForm.username,
password: this.loginForm.password, // password: this.loginForm.password,
rememberMe: this.loginForm.rememberMe, // rememberMe: this.loginForm.rememberMe,
code: this.loginForm.code, // code: this.loginForm.code,
uuid: this.loginForm.uuid // uuid: this.loginForm.uuid,
} // merchantName: this.loginForm.merchantName,
if (user.password !== this.cookiePass) { // loginType: this.loginForm.loginType
user.password = encrypt(user.password) // }
} // if (user.password !== this.cookiePass) {
// user.password = encrypt(user.password)
// }
if (valid) { if (valid) {
this.loading = true this.loading = true
if (user.rememberMe) { // if (user.rememberMe) {
Cookies.set('username', user.username, { expires: Config.passCookieExpires }) // Cookies.set('username', user.username, { expires: Config.passCookieExpires })
Cookies.set('password', user.password, { expires: Config.passCookieExpires }) // Cookies.set('password', user.password, { expires: Config.passCookieExpires })
Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires }) // Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
} else { // } else {
Cookies.remove('username') // Cookies.remove('username')
Cookies.remove('password') // Cookies.remove('password')
Cookies.remove('rememberMe') // Cookies.remove('rememberMe')
} // }
// console.log(user);
const user = { ...this.loginForm }
user.password = encrypt(user.password)
this.$store.dispatch('Login', user).then(() => { this.$store.dispatch('Login', user).then(() => {
this.loading = false this.loading = false
this.$router.push({ path: this.redirect || '/' }) this.$router.push({ path: this.redirect || '/' })
@@ -217,10 +240,12 @@ export default {
text-align: center; text-align: center;
color: #bfbfbf; color: #bfbfbf;
} }
.code_wrap { .code_wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.login-code { .login-code {
width: 33%; width: 33%;
display: inline-block; display: inline-block;