Skip to content

Commit

Permalink
fix:修复登录后个人信息的bug以及全局的信息问题 (#46)
Browse files Browse the repository at this point in the history
  • Loading branch information
@anguoo
anguoo authored Feb 9, 2024
1 parent dce80fa commit d8f37f4
Show file tree
Hide file tree
Showing 8 changed files with 327 additions and 244 deletions.
22 changes: 11 additions & 11 deletions src/components/captcha.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const mouseDown = (event: MouseEvent) => {
clickX = event.clientX
sliderLeft.value = clickX - trackLeft.value
minX.value = clickX
maxX.value = minX.value + 190
maxX.value = minX.value + 230
}
}
Expand All @@ -69,15 +69,15 @@ const mouseMove = (event: MouseEvent) => {
sliderX.value = event.clientX - trackLeft.value - sliderLeft.value
if (sliderX.value < 0) {
sliderX.value = 0
} else if (sliderX.value > 190) {
sliderX.value = 190
} else if (sliderX.value > 230) {
sliderX.value = 230
}
}
}
const mouseUp = () => {
if (isMouseDown.value) {
if (sliderX.value < 190) {
if (sliderX.value < 230) {
errorMsg("验证失败，请重新验证")
isCaptcha.value = "error"
slider.value.classList.add("slider-error")
Expand All @@ -91,7 +91,7 @@ const mouseUp = () => {
}
else {
successMsg("验证成功")
sliderX.value = 190
sliderX.value = 230
isCaptcha.value = "success"
slider.value.classList.add("slider-success")
filled.value.classList.add("filled-success")
Expand All @@ -117,8 +117,8 @@ defineExpose({
<style scoped lang="css">
.track {
position: relative;
width: 220px;
height: 30px;
width: 260px;
height: 38px;
background-color: #f4f9ff;
box-shadow: inset 0 0 2px #c9c9c9;
display: flex;
Expand All @@ -129,7 +129,7 @@ defineExpose({
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
font-size: 13px;
color: rgb(153, 153, 153);
user-select: none;
}
Expand All @@ -138,7 +138,7 @@ defineExpose({
.filled-success,
.filled-error {
position: absolute;
height: 30px;
height: 38px;
border: 0.1px solid #1991fa;
background-color: #cee8fe;
}
Expand All @@ -157,8 +157,8 @@ defineExpose({
.slider-success,
.slider-error {
position: absolute;
width: 30px;
height: 30px;
width: 38px;
height: 38px;
color: #afaeae;
background-color: #fff;
box-shadow: 0 0 2px 0.6px #c9c9c9;
Expand Down
41 changes: 24 additions & 17 deletions src/store/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const useStore = defineStore('user', {
longToken: "",
fatherId: "",
fatherIdName: "",
isAutoLogin: false
isAutoLogin: "false"
}
},

Expand All @@ -28,46 +28,53 @@ export const useStore = defineStore('user', {
},
getUserId () {
if (this.userId == "") {
this.userId = localStorage.getItem("UserId") || ""
if (localStorage.getItem('LongToken') || sessionStorage.getItem('LongToken')) {
this.userId = localStorage.getItem("UserId") || ""
}
}
return this.userId
},
setFatherId (fatherId: string) {
this.fatherId = fatherId
},
setUserInfo (userId: string, shortToken:string, longToken:string, chatToken:string, isAutoLogin:boolean) {

setUserSession (shortToken: string, longToken: string, userId: string) {
this.userId = userId
this.shortToken = shortToken
this.longToken = longToken
this.isAutoLogin = isAutoLogin
},
this.isAutoLogin = "false"

localSetUserInfo (userId: string, shortToken:string, longToken:string, chatToken:string, isAutoLogin:boolean) {
localStorage.setItem("UserId", userId)
localStorage.setItem("ShortToken", shortToken)
localStorage.setItem("LongToken", longToken)
localStorage.setItem("ChatToken", chatToken)
localStorage.setItem("IsAutoLogin", isAutoLogin ? "true" : "false")
sessionStorage.setItem("UserId", userId)
sessionStorage.setItem("ShortToken", shortToken)
sessionStorage.setItem("LongToken", longToken)
sessionStorage.setItem("isAutoLogin", "false")
},
setUserLocal (shortToken: string, longToken: string, userId: string) {
this.userId = userId
this.shortToken = shortToken
this.longToken = longToken
this.isAutoLogin = "true"

updateToken (shortToken:string, longToken:string, chatToken:string) {
localStorage.setItem("UserId", userId)
localStorage.setItem("ShortToken", shortToken)
localStorage.setItem("LongToken", longToken)
localStorage.setItem("ChatToken", chatToken)

this.shortToken = shortToken
this.longToken = longToken
localStorage.setItem("isAutoLogin", "true")
},

loginOut () {
localStorage.removeItem("UserId")
localStorage.removeItem("ShortToken")
localStorage.removeItem("LongToken")
sessionStorage.removeItem("UserId")
sessionStorage.removeItem("ShortToken")
sessionStorage.removeItem("LongToken")
localStorage.removeItem("isAutoLogin")
sessionStorage.removeItem("isAutoLogin")

this.userId = ""
this.shortToken = ""
this.longToken = ""
this.isAutoLogin = ""
}
}
})
73 changes: 42 additions & 31 deletions src/utils/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useStore } from '@/store/index'
import { ElMessage } from 'element-plus'
import type { AxiosResponse, InternalAxiosRequestConfig } from 'axios'
import { ref } from 'vue'
import { errorMsg } from './message'

interface myResponseType<T> extends AxiosResponse {
code: number,
Expand All @@ -22,8 +23,18 @@ const service = axios.create({
const store = useStore()
service.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
const localToken = localStorage.getItem('ShortToken')
config.headers['Authorization'] = localToken
// const localToken = localStorage.getItem('ShortToken')
if (localStorage.getItem('LongToken') === null && sessionStorage.getItem('LongToken') === null) {
return config
}
else if (localStorage.getItem('LongToken') === null && sessionStorage.getItem('LongToken') !== null) {
const localToken = sessionStorage.getItem('ShortToken')
config.headers['Authorization'] = localToken
}
else {
const localToken = localStorage.getItem('ShortToken')
config.headers['Authorization'] = localToken
}

return config
},
Expand All @@ -32,45 +43,45 @@ service.interceptors.request.use(
}
)

const reqCounts = ref(0)
service.interceptors.response.use(
(response: any) => {
return response.data
},
(error: any) => {
const status = error.response.status

if (status === 401) {
const longToken = localStorage.getItem('LongToken')

if (longToken) {
post('/auth/refreshToken', { longToken })
.then((response: any) => {
if (response.msg === 'token有误') {
store.loginOut()
ElMessage.error('登录过期，请重新登录')
if (localStorage.getItem('isAutoLogin') === "true") {//自动登录情况
const longToken = localStorage.getItem('LongToken')
if (longToken) {
try {
post('/auth/refreshToken', { longToken })
.then((res: any) => {
if (res !== undefined) {
store.setUserLocal (res.shortToken, res.longToken, res.userId)
return service(error.config)
}
else {
store.loginOut()
ElMessage.error('登录过期，请重新登录')
}
})
}
else {
if (reqCounts.value < 2) {
reqCounts.value ++
const res = response.data
store.updateToken(res.shortToken, res.longToken, res.chatToken)
return service(error.config)
}
else {
store.loginOut()
ElMessage.error('登录过期，请重新登录')
}
catch (error: any) {
errorMsg(error)
}
})
.catch((error: any) => {
console.log(error);
})
}
else {
store.loginOut()
ElMessage.error('请前往登录')
}
}
else {
store.loginOut()
ElMessage.error('请登录')
return Promise.reject('请登录')
else if (sessionStorage.getItem('isAutoLogin') === "false") {
const longToken = sessionStorage.getItem('LongToken')
post('/auth/refreshToken', { longToken })
.then((res: any) => {
store.setUserSession (res.shortToken, res.longToken, res.userId)
return service(error.config)
})
}
}
else if (status === 404) {
Expand Down
14 changes: 13 additions & 1 deletion src/views/home/popup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,30 @@
import { useStore } from '@/store/index'
import { onMounted, ref } from 'vue'
import { successMsg } from '@/utils/message';
import { getUserDetail } from '../information/utils';
const store = useStore()
const isLogin = ref(false)
onMounted(() => {
isLogin.value = store.getUserId() === "" ? false : true
judgeIsLogin()
})
const judgeIsLogin = () => {
if (localStorage.getItem('LongToken') || sessionStorage.getItem('LongToken')) {
isLogin.value = true
}
else {
isLogin.value = false
}
}
const logout = () => {
store.loginOut()
isLogin.value = false
getUserDetail()
successMsg('退出登录成功')
location.reload()
}
</script>

Expand Down
4 changes: 4 additions & 0 deletions src/views/information/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@ import { ref } from "vue"
const store = useStore()

export const getUserDetail = async() => {
if (sessionStorage.getItem('LongToken') === null && localStorage.getItem('LongToken') === null) {
return
}

const detail = ref({
name: '',
sex: '',
Expand Down
Loading

0 comments on commit d8f37f4

Please sign in to comment.