[JavaScript知识库]人资后台管理系统项目-登录页-实现步骤

1、登录页面-样式调整

登录页整体思路如下：

1. 表单验证（login/index.vue）

   1. utils/validate.js ---> validMobile

2. 收集用户的参数，调用actions

   1. 调用 api/user.js中封装好的api

      1. 找到axios实例：utils/request.js中获取axios实例

      2. 设置基地址从环境变量中

3. 经过请求拦截器，添加请求头（添加token， utils/request.js）

4. 代理转发(vue.config.js)

5. 后端服务器要启动，mongoDB也要启动；后端才能收到请求，返回数据

6. 经过响应拦截器的处理(utils/request.js)

   1. 判断当前操作是否成功，决定是否axios报错

   2. 简化获取有效数据的写法(脱壳)

7. 得到api调用之后结果（login.vue）

8. 保存token到vuex,调用mutations（store/modules/user.js）

9. token做持久化(utils/auth.js)

1.1设置登录表单的logo图

在views/login/index.vue

<!-- 放置标题图片 @是设置的别名-->
<div class="title-container">
 ? ?<h3 class="title">
 ? ? ?<img src="@/assets/common/login-logo.png" alt="">
 ? ?</h3>
 </div>

@ 是我们在vue.config.js中设置的一个路径别名，指向src根目录，这样可以很方便的寻找文件

1.2设置背景图片

views/login/index.vue

<style lang="scss">
.login-container {
 ?background-image: url('~@/assets/common/login.jpg'); // 设置背景图片
 ?background-position: center; // 将图片位置设置为充满整个屏幕
}

解释一下为什么加 ~ :

当在样式表中使用@别名的时候，必须要在@前面加上~这个符号，否则不识别。(固定用法)

1.3设置输入框中的字体颜色

$light_gray: #68b0fe;  // 将输入框颜色改成蓝色

1.4设置登录按钮的样式

在el-button 上补充一个loginBtn的class，并设置样式如下

.loginBtn {
 ?background: #407ffe;
 ?height: 64px;
 ?line-height: 32px;
 ?font-size: 24px;
}

1.5修改显示在Login页面上的提示文本

<div class="tips">
 ?  <span style="margin-right:20px;">账号: 13800000002</span>
 ?  <span> 密码: 123456</span>
</div>

1.6设置输入表单整体背景色: 输入框的背景色

/* reset element-ui css */
.el-form-item {
 ? ?border: 1px solid rgba(255, 255, 255, 0.1);
 ? ?background: rgba(255, 255, 255, 0.7); // 输入登录表单的背景色
 ? ?border-radius: 5px;
 ? ?color: #454545;
}

1.7设置错误信息的颜色**

当表单元素的输入验证错误时，它会在相应的表单元素下边出现一个文字说明。

/* reset element-ui css */
.el-form-item__error {
    color: #fff
}

2、登录页面-改造登录表单中的数据项

1.1按照接口文档的要求，修改已有代码中的表单数据绑定

使用vscode中的替换功能

在login/index.vue中 按shift+f 区分大小写，将username全部换成mobile

查看接口文档，在当前页面中做替换。

loginForm: {
 ? ? ? ?mobile: '13800000002',
 ? ? ? ?password: '123456'
 ? ?  },

2.2自定义校验规则

utils/validate.js中

export function validMobile(str) {
 ?return /^1[3-9]\d{9}$/.test(str) // 校验手机号
}

在login/index.vue中引入

// 引入手机号校验规则
import { validMobile } from '@/utils/validate'
 ?data() {
 ?  // 自定义校验规则
 ? ?const validateMobile = (rule, value, callback) => {
 ? ? ?console.log(value)
 ? ? ?  // 如果validMobile的value符合校验规则 则手机号验证通过
 ? ? ?if (validMobile(value)) {
 ? ? ? ?callback()
 ? ?  } else {  // 否则提示手机号格式错误
 ? ? ? ?callback(new Error('手机号格式错误'))
 ? ?  }
 ?  }
 ? ?return {
 ? ? ?loginForm: {
 ? ? ? ?mobile: '13800000002',
 ? ? ? ?password: '123456'
 ? ?  },
?
 ? ? ?loginRules: {
 ? ? ?  // 手机号的校验规则
 ? ? ? ?mobile: [{ required: true, trigger: 'blur', validator: validateMobile }],
 ? ? ?  // 密码的校验规则
 ? ? ? ?password: [
 ? ? ? ?  { required: true, trigger: 'blur', message: '密码不能为空' },
 ? ? ? ?  { min: 6, max: 16, message: '密码的长度在6-16位之间 ', trigger: 'blur' }
 ? ? ?  ]
 ? ?  },
 ? ? ?loading: false,
 ? ? ?passwordType: 'password',
 ? ? ?redirect: undefined
 ?  }
  },

3、修改axios的响应拦截器

bug：登录时，填写错误的用户名密码，没有报错提示(没有进入catch分支)

解决方法

在request.js中添加 响应拦截器

// 响应拦截器
service.interceptors.response.use(response => {
 ?console.log('所有的响应结果在这：', response)
  // 如果success 是true 就是操作成功
 ?if (response.data.success) {
 ?  // 操作成功
  } else {
 ?  // 如果success是false 业务出错 直接触发reject
 ?  // 被catch分支捕获
 ? ?return Promise.reject(new Error('请求失败'))
  }
}, error => {
 ?return Promise.reject(error) // 返回执行错误 让当前的执行跳转出成功 直接进入catch
})

4、解决观察返回值需要 res.data.data的问题

只需要一行代码就可以解决

5、token-处理

整体思路

5.1将token保存到vuex中

store/user.js中

export default {
 ?namespaced: true,
 ?state: {
 ? ?token: ''
  },
 ?mutations: {
 ? ?setToken(state, newToken) {
 ? ? ?state.token = newToken
 ?  }
  },
 ?actions: {
  }
}

在login/indexvue中 如何调用mutation

 ?  // 做登录的动作
 ? ?async doLogin() {
 ? ? ?try {
 ? ? ? ?const res = await login(this.loginForm)
 ? ? ? ?console.log('登录的接口结果是:', res)
?
 ? ? ?  // 保存token到vuex
 ? ? ?  // 在组件中调用mutation
 ? ? ? ?this.$store.commit('user/setToken', res.data)
 ? ?  } catch (err) {
 ? ? ? ?alert('登录失败')
 ? ?  }
 ?  },

配置axios请求拦截器

将登陆获取到的token统一注入到接口的请求头中 。

请求拦截器代码

在文件src/utils/request.js中:

• 引入store

• import store from '@/store'

  • 如果当前vuex中有token，就在请求头中设置上。

// 请求拦截 :添加请求头 携带token信息
service.interceptors.request.use((config) => {
 ?const token = store.state.user.token
 ?if (token) {
 ? ?config.headers['Authorization'] = `Bearer ${token}`
  }
?
 ?return config
}, error => {
 ?return Promise.reject(error) // 返回执行错误
})
 // Authorization和bearer 是本项目的后端接口要求的写法。

?
?

6、token-处理-持久化

现在的token是保存在vuex中，而页面刷新之后，vuex的内容丢失了，将会导致接口访问异常。所以我们需要对token做持久化处理： 刷新页面之后token不丢失。

在utils/auth.js

import Cookies from 'js-cookie'
?
const TokenKey = 'vue_admin_template_token'
?
export function getToken() {
 ?return Cookies.get(TokenKey)
}
?
export function setToken(token) {
 ?return Cookies.set(TokenKey, token)
}
?
export function removeToken() {
 ?return Cookies.remove(TokenKey)
}

在vuex中引入方法，并调用

在store/modules/user.js文件中，

import { getToken, setToken, removeToken } from '@/utils/auth'
?
?
export default {
 ?namespaced: true,
 ?state: {
 ? ?token: getToken() || null // 默认为null
  },
  // 修改状态
 ?mutations: {
 ?  // 设置token
 ? ?setToken(state, newToken) {
 ? ? ?state.token = newToken
 ? ?  // 本地存一下
 ? ? ?setToken(newToken)
 ?  },
?
 ?  // 删除vuex的token---用于登出时
 ? ?removeToken(state) {
 ? ? ?state.token = null
 ? ?  // 删除本地token
 ? ?  // 本地存一下
 ? ? ?removeToken()
 ?  }
  },

7、在vuex中的action里发登陆请求

在store/modules/user.js中，写actions如下：

 export default {
  // ... 省略其他
 actions: {
 ?  // data表示接口参数
 ? ?async userLogin(context, obj) {
 ? ? ?console.log('action userLogin', context, obj)
 ? ?  // 调用ajax请求去做登陆
 ? ? ?const res = await login(obj)
 ? ?  // 在actions中，如果要修改state，还是要调用mutaions
 ? ?  // context.commit('mutation名'， 参数)
 ? ? ?context.commit('setToken', res.data)
 ?  }
  }
 }

7.1在组件中调用action

async doLogin() {
 ? ? ?try {
 ? ? ?  // // 1. 保存token到vuex
 ? ? ?  // // 如何在组件调用带命名空间mutations
 ? ? ?  // // this.$store.commit("命名空间/mutations名"，载荷)
 ? ? ?  // this.$store.commit('user/setToken', res.data)
 ? ? ?  // 在组件中调用带命名空间的action
 ? ? ? ? ?
 ? ? ? ?await this.$store.dispatch('user/userLogin', this.loginForm)
 ? ? ? ?console.log('用户登录成功')
 ? ?  } catch (err) {
 ? ? ? ?alert('用户登录，失败')
 ? ? ? ?console.log('用户登录，失败', err)
 ? ?  }
 ?  },