如何优雅实现一个用户登录？

落十九
513 阅读3分钟

| 背景

Demo是基于Vue2 和 Element-ui 构建的

文中包含 TypeScript 、Axios、Vuex、 路由权限管理等内容

| 具体实现

1. 界面布局

Demo基于Element构建，在入口文件中全局引入组件库 （也可做按需引入）

    // main.ts
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css'; 
    Vue.use(ElementUI);

新增login界面 文中主要使用到了form表单组件

image.png

2. 表单验证

界面构建完成之后 给表单加上校验功能

form表单验证，通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可，也可通过validator设置自定义校验规则，这里我们选择第二种方式

给phone 和 password 分别设置自定义规则 ， 然后通过 rules 匹配规则

trigger为规则的触发方式, required 则代表是否必选项

image.png

image.png

3. 请求登录

实现点击登录跳转页面之前， 让我们对接口进行封装处理，以便于我们后期更好的维护

这里我们使用到了axios, 所以先进行安装

    npm install axios

好了，接下来让我们对axios进行一些简单的封装处理 在utils 目录下新建一个 axios.ts文件

image.png

下面让我们对登录接口也新建一个文件services/user.ts单独存放，以便后期更好的维护

定义好接口并导出便于我们在需要用到的地方做调用 ， interface 对接口参数类型做了类型约束

image.png

接着我们回到login登录界面，继续书写登录逻辑 下面是点击登录按钮后做的逻辑梳理

  1. 点击登录先进行表单验证
  2. 验证通过 --> 提交表单，调用我们刚才封装好的登录接口
  3. 请求成功则记录登录信息到vuex中留做后续使用，反之则提示错误信息

isLoginLoading 是对接口请求时做的一个优化处理，点击登录操作后

对登录按钮加入一个加载中的动画，防止用户因网络慢等原因而多次点击登录，多次发送请求

image.png

image.png

4. 持久化处理

现在基本功能已经实现了，但是还有个问题，当页面刷新时，存放在vuex中的用户数据会消失

这时候，我们需要做数据持久化处理 利用 浏览器存储 实现这功能

  • 存储数据时将数据存储d到到浏览器本地存储
  • state 中的 user直接到 localStorage 中获取数据

image.png

5. 页面路由权限校验

最后，我们还有一个问题需要解决，页面路由权限校验

我们不能允许没有登录的用户直接通过路由地址访问到我们的首页或其他需要登录才能访问的界面

这时候，该用到 路由守卫 和 路由元信息 了

路由元信息 允许将任意信息附加到路由上 而 路由守卫 则可以拦截所有路由

  1. 首先我们对需要登录才能访问的界面通过路由元信息里的mate字段, 给路由添加标记
  2. 对路由进行拦截， 识别到mate里的信息判断是否需要验证，并通过验证结果决定是否放行

image.png

image.png

大功告成 ！

| END...

不要在任何东西面前失去自我，

哪怕是教条，哪怕是别人的目光，

哪怕是爱情，都不值得。

avatar
文章
阅读
粉丝