Vue3仿美团项目笔记--第六天

6 第六天

主要任务：安全校验，登陆，注册，账号管理

 

6.1 校验路由

按照实际情况，如果没有登陆过，只能访问首页，当访问其他页面的时候弹出提示框，跳转到登陆页面。

在router中给需要校验的路由地址添加mate属性，当isAuth为true的时候可以访问，为false的时候禁止访问。

添加前置钩子函数，当点击的路由不需要校验，就直接跳到点击的页面；如果需要校验的页面，就要判断是否登陆过，传递一个参数 localStorage.isLogin当它等于"1" 为登陆过，可以就直接跳转，如果没有传递这个参数过来，就代表没登陆过，然后弹出提示框跳转到登录页面。

6.2 登陆注册页面

页面包含头部组件，一个div，两个输入框，两个按钮，剩下的就是样式，比较简单。

使用vant组件中的Form表单组件。

6.3 注册功能

在注册页面定义一个注册方法，注册成功的时候有Toast提示框，然后使用JSON.stringify把输入的名称和密码转化为字符串，然后router.push进入登陆页面。

然后就是表单的点击提交按钮，接收表单提交的信息，如果提交的用户名与本地数据库的用户名相同，就提示“该用户已注册”，然后跳转到登录页面