Skip to content

Commit

Permalink
fix:Optimize login passwords
Browse files Browse the repository at this point in the history
  • Loading branch information
yanghang committed Jan 16, 2024
1 parent f731a58 commit a35c173
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 36 deletions.
2 changes: 0 additions & 2 deletions src/packages/api/app.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@ import apiMap from "@/packages/api/apiMap.ts"
import {resetApiInstanceUrl} from "@/packages/global"

const login = (params) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return post(resetApiInstanceUrl(apiMap.login), params, {hint: true})
}

const register = (params) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
return post(resetApiInstanceUrl(apiMap.register), params, {hint: true})
}
Expand Down
18 changes: 12 additions & 6 deletions src/packages/http/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@ import axios, {AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, Int
import axiosRetry from "axios-retry"
import locaStore from "@/packages/utils/locaStore.ts"

const http: AxiosInstance = axios.create({
interface BagAxiosInstance extends AxiosInstance {
$configOptions?: any
$router?: any
}

const http: BagAxiosInstance = axios.create({
withCredentials: true,
})

Expand All @@ -13,23 +18,24 @@ axiosRetry(http, {
})

http.interceptors.request.use((config: InternalAxiosRequestConfig) => {
config.headers["authorization"] = locaStore.get("access_token")
if (locaStore.get("access_token")) {
config.headers["authorization"] = locaStore.get("access_token")
}
return config
}, (error: AxiosError) => {
return Promise.reject(error)
})

http.interceptors.response.use((response: AxiosResponse) => {
const {code, msg} = response.data
if (code === 1) {
if (http.$configOptions.httpCode.indexOf(code) !== -1) {
// @ts-ignore
if (response.config.hint && msg) {
if (response.config.hint && msg && window.$message) {
window.$message.success(msg)
}
return response.data
}
if(code === 1003){
// @ts-ignore
if (code === 1003) {
http.$router.push(http.$configOptions.resetPath)
}
return Promise.reject(response)
Expand Down
7 changes: 4 additions & 3 deletions src/packages/layout/components/UserSet.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,10 +271,10 @@ export default defineComponent({
ScanOutline() {
toggle()
},
GithubOutlined(){
GithubOutlined() {
window.open("https://github.com/hangjob/vue-bag-admin")
},
HomeOutline(){
HomeOutline() {
window.location.href = "/"
},
SearchOutline() {
Expand All @@ -286,7 +286,8 @@ export default defineComponent({
handleSelect(key: string | number) {
if (key === "stmt4") {
app.$reset()
locaStore.clearAll()
locaStore.remove("access_token")
locaStore.remove("app")
router.push("/login")
}
}
Expand Down
66 changes: 41 additions & 25 deletions src/packages/view/login/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
</n-grid-item>
<n-grid-item span="24 m:24 l:12">
<div class="slide-right">
<n-h1>{{compData[compData.mode].title}}</n-h1>
<n-text depth="3">{{compData[compData.mode].des}}</n-text>
<n-h1>{{ compData[compData.mode].title }}</n-h1>
<n-text depth="3">{{ compData[compData.mode].des }}</n-text>
<n-form autocomplete="off" :rules="compData.rules" ref="formRef" class="login-form"
layout="vertical"
:model="compData.form"
Expand Down Expand Up @@ -92,28 +92,35 @@
v-model:value="compData.form.email"
placeholder="输入手机号或者邮箱">
</n-input>
<n-input size="large" :style="{width:'43%'}" :maxlength="6" autocomplete="off"
<n-input size="large" :style="{width:'43%'}" :maxlength="6"
autocomplete="off"
v-model:value="compData.form.code" placeholder="输入验证码">
</n-input>
<n-button size="large" type="primary" ghost>发送验证码</n-button>
</n-input-group>
</n-form-item>
</template>
<n-form-item label="你的密码" path="password">
<n-input size="large" :maxlength="30" :show-password-on="'click'" type="password"
<n-input size="large" :maxlength="30" :show-password-on="'click'"
type="password"
autocomplete="off" v-model:value="compData.form.password"
placeholder="输入你的密码"
>
</n-input>
</n-form-item>
</n-form>
<n-space style="margin-bottom: 10px" justify="space-between">
<n-checkbox v-model:checked="compData.form.rememberPas">七天记住我</n-checkbox>
<n-checkbox v-model:checked="compData.rememberPas">七天记住我</n-checkbox>
<n-text depth="3">忘记密码? 找回密码</n-text>
</n-space>
<n-space justify="space-between" :size="[10,15]" vertical>
<n-button size="large" style="width: 100%" @click="handleLogin">{{compData[compData.mode].btn}}</n-button>
<n-text style="text-align: right;cursor: pointer" @click="compData.mode = compData.mode ==='login' ? 'register' : 'login'" depth="3">{{compData[compData.mode].hint}}</n-text>
<n-button size="large" style="width: 100%" @click="handleLogin">
{{ compData[compData.mode].btn }}
</n-button>
<n-text style="text-align: right;cursor: pointer"
@click="compData.mode = compData.mode ==='login' ? 'register' : 'login'"
depth="3">{{ compData[compData.mode].hint }}
</n-text>
</n-space>
</div>
</n-grid-item>
Expand All @@ -123,16 +130,17 @@
</div>
</div>
</n-card>
<!-- <DigitalClock></DigitalClock>-->
<!-- <DigitalClock></DigitalClock>-->
</template>
<script lang="ts">
import {defineComponent, ref, reactive, CSSProperties, computed} from "vue"
import {defineComponent, ref, reactive, CSSProperties, computed, onMounted} from "vue"
import {useRouter} from "vue-router"
import appStore from "@/packages/pinia/app.ts"
import locaStore from "@/packages/utils/locaStore.ts"
import { FormItemRule,} from "naive-ui"
import {FormItemRule,} from "naive-ui"
import useComponent from "@/packages/view/login/useComponent.ts"
import {login,register} from "@/packages/api/app.ts"
import {login, register} from "@/packages/api/app.ts"
const imgs = ["login_bg_1.jpg", "login_bg_2.jpg", "login_bg_3.jpg"]
export default defineComponent({
Expand All @@ -142,21 +150,22 @@ export default defineComponent({
const formRef = ref()
const app = appStore()
const {themeName} = app.userSetting
const {commonData} = useComponent()
const {commonData} = useComponent()
const compData = reactive({
form: {
name: "admin",
password: "123456",
email: "",
code: ""
code: "",
},
rememberPas: false,
passView: false,
rules: {
name: [
{required: true, message: "请输入你的用户", trigger: "blur"},
],
email: [{
validator: (rule: FormItemRule, value: string)=>{
validator: (rule: FormItemRule, value: string) => {
if (app.mobile) {
if (compData.form.email) {
return true
Expand All @@ -170,7 +179,8 @@ export default defineComponent({
return new Error("请输入你的手机号或者邮箱以及验证码")
}
}
}, trigger: "blur"}
}, trigger: "blur"
}
],
code: [
{required: true, message: "请输入验证码", trigger: "blur"},
Expand All @@ -187,32 +197,38 @@ export default defineComponent({
},
...commonData
})
const getAssetsFile = computed(() => new URL(`../../assets/${compData.imgName}`, import.meta.url).href)
onMounted(() => {
compData.form.password = locaStore.get("pass")
compData.rememberPas = !!compData.form.password
})
const handleLogin = (e) => {
e.preventDefault()
formRef.value?.validate((errors) => {
if (!errors) {
if(compData.mode === "login"){
login(compData.form).then((result)=>{
if( app.configOptions.events.login ){
app.configOptions.events.login({ result,router })
}else{
if (compData.mode === "login") {
login(compData.form).then((result) => {
if (compData.rememberPas) {
locaStore.set("pass", compData.form.password, 7 * 86400)
} else {
locaStore.remove("pass")
}
if (app.configOptions.events.login) {
app.configOptions.events.login({result, router})
} else {
locaStore.set("access_token", result.data)
router.push("/home")
}
})
}
if(compData.mode === "register"){
register(compData.form).then((res)=>{
if (compData.mode === "register") {
register(compData.form).then((res) => {
compData.mode = "login"
})
}
}
})
}
return {
getAssetsFile,
handleLogin,
Expand Down

0 comments on commit a35c173

Please sign in to comment.