rsgl/VueProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix login

Browse Source
This commit is contained in:
LingandRX 2024-11-17 22:22:10 +08:00
parent 2cc365f2cc
commit 1e7c921ae2
3 changed files with 59 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@ -18,12 +18,12 @@
</template> </template>
<script setup lang="js"> <script setup lang="js">
import { RouterView } from 'vue-router' import { RouterView, useRoute } from 'vue-router'
import { h, ref, onMounted } from 'vue' import { h, ref, onMounted, watch } from 'vue'
import { AppstoreOutlined } from '@ant-design/icons-vue' import { AppstoreOutlined } from '@ant-design/icons-vue'
import CustomCard from '@/components/CustomCard.vue' import CustomCard from '@/components/CustomCard.vue'
const isLogin = ref(false) const isLogin = ref(true)
const current = ref(['mail']) const current = ref(['mail'])
const items = ref([ const items = ref([
@ -40,9 +40,16 @@ const items = ref([
title: '关于' title: '关于'
} }
]) ])
onMounted(() => {
const route = useRoute()
const updateLoginStatus = () => {
isLogin.value = !!localStorage.getItem('token') isLogin.value = !!localStorage.getItem('token')
}) console.log('isLogin.value:', isLogin.value)
}
onMounted(updateLoginStatus)
watch(route, updateLoginStatus)
</script> </script>
<style scoped> <style scoped>

15
src/router/index.js
View File

@ -17,7 +17,7 @@ const routes = [
name: 'login', name: 'login',
component: () => import('../views/LoginView.vue'), component: () => import('../views/LoginView.vue'),
meta: { meta: {
requiresAuth: false requiresAuth: true
} }
} }
] ]
@ -28,12 +28,13 @@ const router = createRouter({
}) })
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log('beforeEach', to, from) const isLogin = !!localStorage.getItem('token')
const token = localStorage.getItem('token') const requiresAuth = to.matched.some((record) => !!record.meta['requiresAuth'])
if (to.matched.some((record) => record.meta.requiresAuth === false)) {
next() console.log('isLogin', isLogin)
} else if (!token) { console.log('requiresAuth', requiresAuth)
next({ name: 'login' }) if (!requiresAuth && !isLogin) {
next('/login')
} else { } else {
next() next()
} }

91
src/views/LoginView.vue
View File

@ -1,51 +1,46 @@
<template> <template>
<div class="login-container"> <div class="login-container">
<div v-if="!isLogin"> <a-form
<a-form :label-col="labelCol"
:model="formState" :model="formState"
name="basic" :wrapper-col="wrapperCol"
:label-col="labelCol" autocomplete="off"
:wrapper-col="wrapperCol" name="basic"
autocomplete="off" @finish="onFinish"
@finish="onFinish" @finishFailed="onFinishFailed"
@finishFailed="onFinishFailed" >
<a-form-item
:rules="[{ required: true, message: 'Please input your username!' }]"
label="Username"
name="username"
> >
<a-form-item <a-input v-model:value="formState.username">
label="Username" <template #prefix>
name="username" <UserOutlined class="site-form-item-icon" />
:rules="[{ required: true, message: 'Please input your username!' }]" </template>
> </a-input>
<a-input v-model:value="formState.username"> </a-form-item>
<template #prefix>
<UserOutlined class="site-form-item-icon" />
</template>
</a-input>
</a-form-item>
<a-form-item <a-form-item
label="Password" :rules="[{ required: true, message: 'Please input your password!' }]"
name="password" label="Password"
:rules="[{ required: true, message: 'Please input your password!' }]" name="password"
> >
<a-input-password v-model:value="formState.password"> <a-input-password v-model:value="formState.password">
<template #prefix> <template #prefix>
<LockOutlined class="site-form-item-icon" /> <LockOutlined class="site-form-item-icon" />
</template> </template>
</a-input-password> </a-input-password>
</a-form-item> </a-form-item>
<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }" name="remember">
<a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox> <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ offset: 8, span: 16 }"> <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
<a-button type="primary" html-type="submit">Submit</a-button> <a-button html-type="submit" type="primary">Submit</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
</div>
<div v-else>
<p>Welcome, you are logged in!</p>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
@ -74,15 +69,6 @@ onMounted(() => {
isLogin.value = !!localStorage.getItem('token') isLogin.value = !!localStorage.getItem('token')
}) })
const removeLoginRoute = () => {
const loginRoute = router.getRoutes().find((route) => route.name === 'login')
console.log('loginRoute:', loginRoute)
if (loginRoute) {
console.log(loginRoute.name)
router.removeRoute(loginRoute.name)
}
}
const onFinish = async (values) => { const onFinish = async (values) => {
try { try {
const response = await fetch('http://localhost:3000/users', { const response = await fetch('http://localhost:3000/users', {
@ -95,10 +81,11 @@ const onFinish = async (values) => {
const user = users.find( const user = users.find(
(user) => user.username === values.username && user.password === values.password (user) => user.username === values.username && user.password === values.password
) )
// const user = { username: 'test', password: 'test', token: 'test' }
if (user && user.token) { if (user && user.token) {
localStorage.setItem('token', user.token) localStorage.setItem('token', user.token)
isLogin.value = true isLogin.value = true
removeLoginRoute()
await router.push('/') await router.push('/')
} else { } else {
alert('Invalid username or password') alert('Invalid username or password')