前端 Token、账号、密码等信息,统一使用 LocalStorage 替代 Cookie 存储

This commit is contained in:
YunaiV 2022-05-22 20:09:48 +08:00
parent 7926ea9896
commit d322e78199
6 changed files with 159 additions and 57 deletions

View File

@ -100,7 +100,7 @@ public class MemberAuthServiceImpl implements MemberAuthService {
}
// 创建 Token 令牌记录登录日志
return createTokenAfterLoginSuccess(user, null, LoginLogTypeEnum.LOGIN_SOCIAL);
return createTokenAfterLoginSuccess(user, user.getMobile(), LoginLogTypeEnum.LOGIN_SOCIAL);
}
@Override

View File

@ -180,7 +180,7 @@ public class AdminAuthServiceImpl implements AdminAuthService {
}
// 创建 Token 令牌记录登录日志
return createTokenAfterLoginSuccess(user.getId(), null, LoginLogTypeEnum.LOGIN_SOCIAL);
return createTokenAfterLoginSuccess(user.getId(), user.getUsername(), LoginLogTypeEnum.LOGIN_SOCIAL);
}
@Override

View File

@ -1,22 +1,96 @@
import Cookies from 'js-cookie'
import {decrypt, encrypt} from "@/utils/jsencrypt";
const AccessTokenKey = 'ACCESS_TOKEN'
const RefreshTokenKey = 'REFRESH_TOKEN'
// ========== Token 相关 ==========
export function getAccessToken() {
return Cookies.get(AccessTokenKey)
return localStorage.getItem(AccessTokenKey)
}
export function getRefreshToken() {
return Cookies.get(RefreshTokenKey)
return localStorage.getItem(RefreshTokenKey)
}
export function setToken(token) {
Cookies.set(AccessTokenKey, token.accessToken)
Cookies.set(RefreshTokenKey, token.refreshToken)
localStorage.setItem(AccessTokenKey, token.accessToken)
localStorage.setItem(RefreshTokenKey, token.refreshToken)
}
export function removeToken() {
Cookies.remove(AccessTokenKey)
Cookies.remove(RefreshTokenKey)
localStorage.removeItem(AccessTokenKey)
localStorage.removeItem(RefreshTokenKey)
}
// ========== 账号相关 ==========
const UsernameKey = 'USERNAME'
const PasswordKey = 'PASSWORD'
const RememberMeKey = 'REMEMBER_ME'
export function getUsername() {
return localStorage.getItem(UsernameKey)
}
export function setUsername(username) {
localStorage.setItem(UsernameKey, username)
}
export function removeUsername() {
localStorage.removeItem(UsernameKey)
}
export function getPassword() {
const password = localStorage.getItem(PasswordKey)
return password ? decrypt(password) : undefined
}
export function setPassword(password) {
localStorage.setItem(PasswordKey, encrypt(password))
}
export function removePassword() {
localStorage.removeItem(PasswordKey)
}
export function getRememberMe() {
return localStorage.getItem(RememberMeKey) === 'true'
}
export function setRememberMe(rememberMe) {
localStorage.setItem(RememberMeKey, rememberMe)
}
export function removeRememberMe() {
localStorage.removeItem(RememberMeKey)
}
// ========== 租户相关 ==========
const TenantIdKey = 'TENANT_ID'
const TenantNameKey = 'TENANT_NAME'
export function getTenantName() {
return localStorage.getItem(TenantNameKey)
}
export function setTenantName(username) {
localStorage.setItem(TenantNameKey, username)
}
export function removeTenantName() {
localStorage.removeItem(TenantNameKey)
}
export function getTenantId() {
return localStorage.getItem(TenantIdKey)
}
export function setTenantId(username) {
localStorage.setItem(TenantIdKey, username)
}
export function removeTenantId() {
localStorage.removeItem(TenantIdKey)
}

View File

@ -1,9 +1,8 @@
import axios from 'axios'
import {Message, MessageBox, Notification} from 'element-ui'
import store from '@/store'
import {getAccessToken, getRefreshToken, setToken} from '@/utils/auth'
import {getAccessToken, getRefreshToken, getTenantId, setToken} from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import Cookies from "js-cookie";
import {getPath, getTenantEnable} from "@/utils/ruoyi";
import {refreshToken} from "@/api/login";
@ -21,14 +20,15 @@ let requestList = []
// 是否正在刷新中
let isRefreshToken = false
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API + '/admin-api/', // 此处的 /admin-api/ 地址,原因是后端的基础路径为 /admin-api/
// 超时
timeout: 30000
timeout: 30000,
// 禁用 Cookie 等信息
withCredentials: false,
})
// request拦截器
service.interceptors.request.use(config => {
@ -39,7 +39,7 @@ service.interceptors.request.use(config => {
}
// 设置租户
if (getTenantEnable()) {
const tenantId = Cookies.get('tenantId');
const tenantId = getTenantId();
if (tenantId) {
config.headers['tenant-id'] = tenantId;
}
@ -79,7 +79,6 @@ service.interceptors.response.use(async res => {
// 获取错误信息
const msg = res.data.msg || errorCode[code] || errorCode['default']
if (ignoreMsgs.indexOf(msg) !== -1) { // 如果是忽略的错误码,直接返回 msg 异常
console.log('132312311');
return Promise.reject(msg)
} else if (code === 401) {
// 如果未认证,并且未进行刷新令牌,说明可能是访问令牌过期了
@ -166,7 +165,7 @@ service.interceptors.response.use(async res => {
export function getBaseHeader() {
return {
'Authorization': "Bearer " + getAccessToken(),
'tenant-id': Cookies.get('tenantId'),
'tenant-id': getTenantId(),
}
}

View File

@ -107,9 +107,17 @@
import {getCodeImg, sendSmsCode, socialAuthRedirect} from "@/api/login";
import {getTenantIdByName} from "@/api/system/tenant";
import Cookies from "js-cookie";
import {decrypt, encrypt} from '@/utils/jsencrypt'
import {SystemUserSocialTypeEnum} from "@/utils/constants";
import {getTenantEnable} from "@/utils/ruoyi";
import {
getPassword,
getRememberMe, getTenantName,
getUsername,
removePassword, removeRememberMe, removeTenantName,
removeUsername,
setPassword, setRememberMe, setTenantId, setTenantName,
setUsername
} from "@/utils/auth";
export default {
name: "Login",
@ -161,7 +169,7 @@ export default {
const tenantId = res.data;
if (tenantId && tenantId >= 0) {
//
Cookies.set("tenantId", tenantId);
setTenantId(tenantId)
callback();
} else {
callback('租户不存在');
@ -172,8 +180,6 @@ export default {
}
]
},
loading: false,
redirect: undefined,
//
@ -213,21 +219,16 @@ export default {
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const tenantName = Cookies.get('tenantName');
const mobile = Cookies.get('mobile');
const mobileCode = Cookies.get('mobileCode');
const loginType = Cookies.get('loginType');
const username = getUsername();
const password = getPassword();
const rememberMe = getRememberMe();
const tenantName = getTenantName();
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
tenantName: tenantName === undefined ? this.loginForm.tenantName : tenantName,
mobile: mobile === undefined ? this.loginForm.mobile : mobile,
mobileCode: mobileCode === undefined ? this.loginForm.mobileCode : mobileCode,
loginType: loginType === undefined ? this.loginForm.loginType : loginType,
...this.loginForm,
username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false,
tenantName: tenantName ? tenantName : this.loginForm.tenantName,
};
},
handleLogin() {
@ -236,18 +237,18 @@ export default {
this.loading = true;
// Cookie
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, {expires: 30});
Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
Cookies.set('tenantName', this.loginForm.tenantName, {expires: 30});
setUsername(this.loginForm.username)
setPassword(this.loginForm.password)
setRememberMe(this.loginForm.rememberMe)
setTenantName(this.loginForm.tenantName)
} else {
Cookies.remove("username");
Cookies.remove("password");
Cookies.remove('rememberMe');
Cookies.remove('tenantName');
removeUsername()
removePassword()
removeRememberMe()
removeTenantName()
}
//
console.log("发起登录", this.loginForm);
// console.log("", this.loginForm);
this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
this.$router.push({path: this.redirect || "/"}).catch(() => {
});

View File

@ -19,7 +19,7 @@
</el-tab-pane>
</el-tabs>
<div>
<el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<!-- 账号密码登录 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
@ -65,16 +65,28 @@
<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import {
getPassword, getRememberMe,
getUsername,
removePassword,
removeUsername,
setPassword,
setRememberMe,
setUsername
} from "@/utils/auth";
import {getCodeImg} from "@/api/login";
export default {
name: "ThirdLogin",
data() {
return {
codeUrl: "",
captchaEnable: true,
loginForm: {
loginType: "uname",
username: "admin",
password: "admin123",
rememberMe: false, // TODO
rememberMe: false,
},
loginRules: {
username: [
@ -104,6 +116,7 @@ export default {
this.getCookie();
//
this.redirect = this.$route.query.redirect;
this.getCode();
//
this.type = this.$route.query.type;
this.code = this.$route.query.code;
@ -119,16 +132,30 @@ export default {
});
},
methods: {
getCode() {
//
if (!this.captchaEnable) {
return;
}
//
getCodeImg().then(res => {
res = res.data;
this.captchaEnable = res.enable;
if (this.captchaEnable) {
this.codeUrl = "data:image/gif;base64," + res.img;
this.loginForm.uuid = res.uuid;
}
});
},
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
const rememberMe = Cookies.get('rememberMe')
const loginType = Cookies.get('loginType');
const username = getUsername();
const password = getPassword();
const rememberMe = getRememberMe();
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
loginType: loginType === undefined ? this.loginForm.loginType : loginType,
username: username ? username : this.loginForm.username,
password: password ? password : this.loginForm.password,
rememberMe: rememberMe ? getRememberMe() : false,
loginType: this.loginForm.loginType,
};
},
handleLogin() {
@ -136,11 +163,12 @@ export default {
if (valid) {
this.loading = true;
if (this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
setUsername(this.loginForm.username)
setPassword(this.loginForm.password)
setRememberMe(this.loginForm.rememberMe)
} else {
Cookies.remove("username");
Cookies.remove("password");
removeUsername()
removePassword()
}
this.$store.dispatch("SocialLogin2", {
code: this.code,