VUE3前端开发入门系列教程七:登录,localStorage,sessionStorage

由于前后端分离，造成登录验证麻烦（前端UI交互时不经过后端，后端返回的可能时JSON或XML数据），验证使用token方式较方便，就需要保存此类数据。现代浏览器提供了localStorage和sessionStorage两种存储方式，此处不讨论两种方式的区别（请自行百度）。

登录界面：使用Flag存储是否登录，实际应用可以存储后端给出的token

<script>
export default {
	data(){
		return {
			form: {
				username: '',
				password: ''
			}
		}
	},
	methods: {
		login(){
			localStorage.setItem('Flag', 'isLogin')
			this.$router.push({path: '/home'})
		}
	}
}
</script>

<template>
	<div class="login-form">
		<h1 style="margin-bottom: 30px;text-align:center">网络性能监测</h1>
		<Form>
			<FormItem prop="username">
				<Input type="text" v-model="form.username" placeholder="请输入用户名">
					<template #prepend>
						<Icon size="16" type="ios-person" />
					</template>
				</Input>
			</FormItem>
			<FormItem prop="password">
				<Input type="password" v-model="form.password" placeholder="请输入密码">
					<template #prepend>
						<Icon size="14" type="md-lock" />
					</template>
				</Input>
			</FormItem>
			<FormItem>
				<Button @click="login" type="primary" long>登录</Button>
			</FormItem>
		</Form>
	</div>
</template>

<style scoped>
.login-form {
	width: 400px;
	margin: 60px auto;
	border: 1px solid lightgrey;
	border-radius: 5px;
	padding: 60px;
	background-color: white;
}
</style>

每次提交时主动上报token，前端src/router/index.js做一次前端验证，后端再次验证。

let token = localStorage.getItem('token')
fetch.post('/api/getdata', {token: token, ...}).then( res => {})

为安全计，建议storage存储token，提交给后端时，请后端加强验证。