二、从登陆开始

基本登陆

使用路由导航守卫结合 token 处理视图访问拦截

参考链接：

title: 基于 Token 的验证流程 participant 客户端 as client participant 服务器 as server client -> server: 用户名+密码 server --> client: Token 令牌 note over client: 将 Token 存储到本地

在 src/components/login/script.js 中登陆成功，将服务器下发的 token 保存到本地存储：

  1. // 其它代码...
  3. handleLogin () {
  4.   axios.post('http://localhost:8888/api/private/v1/login', this.loginForm)
  5.     .then(res => {
  6.       const {data, meta} = res.data
  7.       const {msg, status} = meta
  9.       if (status === 200) {
  10.         // 将凭证放到到本地存储（会在路由守卫那里使用）
  11.         window.localStorage.setItem('token', data.token)
  13.         // 跳转到首页
  14.         this.$router.push('/')
  15.       } else if (status === 400) {
  16.         window.alert(msg)
  17.       }
  18.     })
  19. }
  21. // 其它代码...

在 src/router/index.js 中，添加全局路由导航守卫对非登陆请求进行登陆权限判定：

  1. // 其它代码...
  3. const router = new Router({
  4.   // ...
  5. })
  7. router.beforeEach((to, from, next) => {
  8.   const {path} = to
  9.   if (path !== '/login') { // 如果请求的不是 /login 则校验登陆状态
  10.     const token = window.localStorage.getItem('token')
  11.     if (!token) { // 如果没有 token 则让其跳转到 /login
  12.       next('/login')
  13.     } else { // 有 token，让其通过
  14.       next()
  15.     }
  16.   } else {
  17.     // 如果用户请求的就是 /login 则直接调用 next() 放行
  18.     next()
  19.   }
  20. })
  22. export default router

导入 ElementUI

参考链接：

安装依赖：

  1. # 或者 npm install element-ui
  2. yarn add element-ui

在 src/main.js 中加载并配置：

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import ElementUI from 'element-ui'
  5. import 'element-ui/lib/theme-chalk/index.css'
  7. Vue.use(ElementUI)
  9. Vue.config.productionTip = false
  11. /* eslint-disable no-new */
  12. new Vue({
  13.   el: '#app',
  14.   router,
  15.   components: { App },
  16.   template: '<App/>'
  17. })

布局登陆组件

参考链接：

参考 Element 的 Form表单组件文档，我们先来个最简单的登陆表单。

将 src/components/login/template.html 文件内容替换为：

  1. <div>
  2.   <el-form :model="loginForm">
  3.     <el-form-item>
  4.       <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
  5.     </el-form-item>
  6.     <el-form-item>
  7.       <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
  8.     </el-form-item>
  9.     <el-form-item>
  10.       <el-button type="primary" @click="handleLogin">登陆</el-button>
  11.     </el-form-item>
  12.   </el-form>
  13. </div>

接下来我们开始调整登陆页面的样式。

首先把公共样式写到 src/assets/css/index.css 文件中。

  1. html, body, #app {
  2.   width: 100%;
  3.   height: 100%;
  4. }
  6. body {
  7.   margin: 0;
  8.   padding: 0;
  9. }

然后在 src/main.js 加载：

  1. // 代码略...
  3. // 引入我们的公共样式
  4. import './assets/css/index.css'
  6. // 代码略...

最后，我们分别调整登陆组件的HTML结构、及CSS样式：

src/components/login/template.html:

  1. <div class="login-wrap">
  2.   <div class="login-form">
  3.     <el-form :model="loginForm">
  4.       <el-form-item>
  5.         <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
  9.       </el-form-item>
  10.       <el-form-item>
  11.         <el-button class="login-submit" type="primary" @click="handleLogin">登陆</el-button>
  12.       </el-form-item>
  13.     </el-form>
  14.   </div>
  15. </div>

src/components/login/style.css:

  1. .login-wrap {
  2.   width: 100%;
  3.   height: 100%;
  4.   background-color: #2d434c;
  5.   display: flex;
  6.   justify-content: center;
  7.   align-items: center;
  8. }
  10. .login-wrap .login-form {
  11.   background-color: #fff;
  12.   padding: 50px 50px 20px 50px;
  13.   width: 25%;
  14. }
  16. .login-wrap .login-form .login-submit {
  17.   width: 100%;
  18. }

为登陆组件加入表单验证

  1. 为表单中需要验证的表单项 el-form-item 声明 prop 属性，属性值给一个有意义的名称
  1. <div class="login-wrap">
  2.   <div class="login-form">
  3.     <el-form :model="loginForm">
  4.       <el-form-item prop="username">
  5.         <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
  6.       </el-form-item>
  7.       <el-form-item prop="password">
  8.         <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
  9.       </el-form-item>
  10.       <el-form-item>
  11.         <el-button class="login-submit" type="primary" @click="handleLogin">登陆</el-button>
  12.       </el-form-item>
  13.     </el-form>
  14.   </div>
  15. </div>
  1. 在组件的 data 中增加一个属性对象 loginFormRule 配置 prop 字段属性的验证规则
  1. import axios from 'axios'
  3. export default {
  4.   // ... 代码略
  5.   data () {
  6.     return {
  7.       loginForm: {
  8.         username: '',
  9.         password: ''
  10.       },
  11.       loginFormRule: {
  12.         username: [
  13.           { required: true, message: '请输入用户名', trigger: 'blur' }
  14.         ],
  15.         password: [
  16.           { required: true, message: '请输入密码', trigger: 'blur' }
  17.         ]
  18.       }
  19.     }
  20.   },
  21.   // ... 代码略
  22. }
  1. 在登陆组件的模板中为 el-form 表单组件绑定 rules 属性到 data 中定义的 loginFormRule
  1. <div class="login-wrap">
  2.   <div class="login-form">
  3.     <el-form :model="loginForm" :rules="loginFormRule">
  4.     ... 代码略
  1. 测试验证是否成功

我们在前面做的 1 - 4 步已经完成了基本的表单验证功能。接下来我们要在表单提交登陆发起请求的时候使用 JavaScript 校验是否通过表单验证，表单验证通过再去提交表单。

首先为登陆组件模板的 el-form 组件声明 ref 属性，属性值给一个有意义的名字。

  1. <div class="login-wrap">
  2.   <div class="login-form">
  3.     <el-form ref="form" :model="loginForm" :rules="loginFormRule">
  4.     ... 代码略

然后在表单提交的时候调用 JavaScript 判断表单验证是否通过，通过再发起登陆请求。

  1. import axios from 'axios'
  3. export default {
  4.   // ... 代码略
  5.   methods: {
  6.     handleLogin () {
  7.       // ['form'] 中的 form 就是 el-form 标签 ref 属性值
  8.       this.$refs['form'].validate((valid) => {
  9.         if (!valid) {
  10.           return
  11.         }
  12.         axios.post('http://localhost:8888/api/private/v1/login', this.loginForm)
  13.           .then(res => {
  14.             const {data, meta} = res.data
  15.             const {msg, status} = meta
  16.             if (status === 200) {
  17.               // 将凭证放到到本地存储（会在路由守卫那里使用）
  18.               window.localStorage.setItem('token', data.token)
  20.               // 跳转到首页
  21.               this.$router.push('/')
  22.             } else if (status === 400) {
  23.               window.alert(msg)
  24.             }
  25.           })
  26.       })
  27.     }
  28.   }
  29.   // ... 代码略
  30. }

使用 Message 消息提示给出操作反馈

无论登陆成功还是登陆失败，我们都应该给出用户一个友好的提示。这里我们可以使用 Element 提供的 Message 消息提示 组件来很方便的实现。

  1. import axios from 'axios'
  3. export default {
  4.   // ... 代码略
  5.   methods: {
  6.     handleLogin () {
  7.       // ['form'] 中的 form 就是 el-form 标签 ref 属性值
  8.       this.$refs['form'].validate((valid) => {
  9.         if (!valid) {
  10.           return
  11.         }
  12.         axios.post('http://localhost:8888/api/private/v1/login', this.loginForm)
  13.           .then(res => {
  14.             const {data, meta} = res.data
  15.             const {msg, status} = meta
  16.             if (status === 200) {
  17.               // 将凭证放到到本地存储（会在路由守卫那里使用）
  18.               window.localStorage.setItem('token', data.token)
  20.               // 跳转到首页
  21.               this.$router.push('/')
  23.               this.$message({
  24.                 message: '登陆成功',
  25.                 type: 'success'
  26.               })
  27.             } else if (status === 400) {
  28.               this.$message.error(msg)
  29.             }
  30.           })
  31.       })
  32.     }
  33.   }
  34.   // ... 代码略
  35. }