HR项目-登录模块-封装登录接口，token,添加token的getters,token就行封装

登录模块

登录页面基本布局

**目标**完成登录页面的基础布局

• 基本布局

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

• 样式处理

/* reset element-ui css */
.login-container {
  // 设置背景图片
  background-image: url('~@/assets/common/login.jpg'); 
  // 将图片位置设置为充满整个屏幕
  background-position: center; 
}

注意： 如需要在样式表中使用**@别名的时候，需要在@前面加上一个~**符号，否则不识别

• 设置手机号和密码的字体颜色
  

// 修改输入框字体颜色
$light_gray: #407ffe; 

• 设置输入表单整体背景色

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

• 设置错误信息的颜色

.el-form-item__error {
  color: #fff;
  font-size: 14px;
}

• 设置登录按钮的样式

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

需要给el-button 增加一个login-btn的class样式

• 修改显示的提示文本和登录文本

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

总结：跳转登录页面的布局样式

登录表单的校验

**目标**对登录表单进行规则校验

基础模板已经有了基础校验的代码,我们只需在此基础上修改即可

• el-form表单校验的必要条件
  • el-form标签上面绑定model和rules熟悉
  • el-form-item标签上绑定prop熟悉，值是要验证的表单的输入域的name
  • el-input上面要双向绑定输入域的name

• 登录表单验证
  • 手机号必填，并且进行格式校验
  • 密码必填，长度6-16位之间

// @/utils/validate.js
// 校验手机号
export function validMobile(str) {
  return /^1[3-9]\d{9}$/.test(str) 
}
// -------------------------------------
import { validMobile } from '@/utils/validate'
data() {
  // 自定义校验函数
  const validateMobile = (rule, value, callback) => {
    if (!validMobile(value)) {
      callback(new Error('手机格式有误'))
    } else {
      callback()
    }
  }

  return {
    loginForm: {
      mobile: '13800000002',
      password: '123456'
    },
    loginRules: {
      mobile: [
        { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
        { validator: validateMobile, trigger: ['blur', 'change'] }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
        { min: 6, max: 16, message: '密码必须是6-16位', trigger: ['blur', 'change'] }
      ]
    },
    loading: false,
    passwordType: 'password',
    redirect: undefined
  }
},

总结：遵循ElementUI的表单验证规则；自定义验证规则要熟悉

登录基本功能

目标 实现基本的登录功能

基地址: http://ihrm-java.itheima.net/api

handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
			// 校验通过发送登录请求
      const loginUrl = 'http://ihrm-java.itheima.net/api/sys/login'
      this.$request.post(loginUrl, this.loginForm).then(res => {
        if (res.data.code === 10000) {
            this.$router.push('/')
        }
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

封装单独的登录接口

目标 在单独请求模块中,单独封装登录接口

完成登录模块之后，我们需要对登录接口进行封装, 登录请求应该单独封装到一个模块中, 便于维护和管理

• 封装基本的接口模块 api/user.js

import request from '@/utils/request'

export function reqLogin(data) {
  return request({
    method: 'post',
    // 这里的 /api 由于开发环境所有接口都要加, 通过baseUrl加
    url: '/sys/login', 
    data
  })
}

• 封装一个Action方法实现登录

import { reqLogin } from '@/api/user.js'

export default  {
  namespaced: true,
  state: () => ({
    userInfo: {}
  }),
  mutations: {
    // 更新用户信息
    updateUserInfo (state, payload) {
      state.userInfo = payload
    }
  },
  actions: {
    // 实现登录功能
    async login (context, payload) {
      try {
        const ret = await reqLogin(payload)
        if (ret.data.code === 10000) {
          // 缓存用户信息
          context.commit('updateUserInfo', ret.data)
          // 登录成功
          return true
        } else {
          return false
        }
      } catch {
        return false
      }
    }
  }
}

• 重构登录功能

handleLogin() {
  this.$refs.loginForm.validate(async valid => {
    if (valid) {
      // 触发Action实现登录
      const ret = await this.login(this.loginForm)
      if (ret) {
        // 登录成功，跳转到主页面
        this.$router.push('/')
      } else {
        // 登录失败
        this.$message.error('登录失败')
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

总结

1. 封装登录接口api
2. 封装调用接口的Action方法
3. 组件中把Action映射为函数并且调用方法实现登录

基于vuex管理token

目标 封装获取token的登录action, 在vuex中存储token

• 准备状态store/modules/user.js

state: () => ({
    token: ''
}),

• 封装 action 和 对应的 mutation store/modules/user.js

mutations: {
  // 更新用户信息
  setToken (state, payload) {
    state.token = payload
  }
},
actions: {
  // 实现登录功能
  async login (context, payload) {
    try {
      const ret = await reqLogin(payload)
      if (ret.data.code === 10000) {
        // 缓存用户信息
        context.commit('setToken', ret.data)
        // 登录成功
        return true
      } else {
        return false
      }
    } catch {
      return false
    }
  }
}

• 页面导入并调用

import { mapActions } from 'vuex'
methods: {
    ...mapActions('user', ['login'])
    handleLogin() {
      this.$refs.loginForm.validate(async valid => {
        if (valid) {
          // 触发Action实现登录
          const ret = await this.login(this.loginForm)
          if (ret) {
            // 登录成功，跳转到主页面
            this.$router.push('/')
          } else {
            // 登录失败
            this.$message.error('登录失败')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
}

总结：token的值不是标准的JWT，并且没有refresh_token，单纯存储一个token即可

JWT json web token 是一种加密token一种规范

添加token的getters

目标 通过getters获取token信息

为了更好的让其他模块和组件更好的获取token数据，我们可以在**store/getters.js**中将token值, 添加成公共的 getters, 便于将来访问

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token
}
export default getters

token缓存封装

目标 封装通用的token操作模块

本地存储：Cookie/sessionStorage/localStorage

Cookie的问题：

1. 本地存储的数据量有限制 4K 1K = 1024B(Byte) 1Byte = 8bit

2. 不安全（存储在客户端）

特点：发送请求时会自动携带Cookie；没有浏览器的兼容问题；

Cookie的类型：会话Cookie（浏览器一旦关闭就失效了）；持久Cookie（可以设置有效期）

• 模块封装**utils/auth.js**

import Cookies from 'js-cookie'

const TokenKey = 'hrsaas_hm_123_token'

// 获取token
export function getToken() {
  return Cookies.get(TokenKey)
}

// 设置token
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

// 删除token
export function removeToken() {
  return Cookies.remove(TokenKey)
}

• 初始化获取缓存信息

const state = {
  // 一进来优先从缓存中取
  token: getToken() // token字符串
}

• vuex中存token时, 也同步存到cookie中

const mutations = {
  // 设置token
  setToken(state, newToken) {
    state.token = newToken
    // 设置了 token 的同时, 同步到本地cookies中
    setToken(newToken)
  }
}

总结：封装token的基本操作方法，本地缓存采用cookie

axios响应拦截器

目标: 处理响应拦截器

axios返回的数据中默认增加了一层**data的包裹**, 每次我们都要 res.data.data, 太麻烦, 所以我们需要在这里处理下。

// 响应拦截器
instance.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  const res = response.data
  return res
}, function(error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

总结：通过响应拦截器优化数据的获取

导航守卫处理

目标：根据token处理主页的访问权限问题 (没有token的用户, 不让你进系统的)

• 权限拦截的流程图
  

• 功能代码实现**src/permission.js**

import router from '@/router/index.js'
import store from '@/store/index.js'

// 准备白名单
const whiteList = ['/login', '/404', '/abc']
// 配置导航守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否已经登录（是否有token）
  const token = store.getters.token
  if (token) {
    // 已经登录，判断是否为登录的路径
    if (to.path === '/login') {
      // 进入登录页面(如果已经有token，可以不需要用户再次登录，可以让他直接进入主页)
      next('/')
    } else {
      // 如果不是登录页面，那么直接进入组件即可
      next()
    }
  } else {
    // 没有登录,判断请求路径是否为白名单
    if (whiteList.includes(to.path)) {
      // 如果在白名单里面就放行
      next()
    } else {
      // 如果不在白名单里面，跳转到登录页面
      next('/login')
    }
  }
})

总结：导航守卫要拦截素有请求的路由链接

1. 判断是否登录
2. 判断是否为白名单

关于基准路径的配置

注意：.env.development和.env.production 文件用于配置开发环境和生产环境的基准url地址

• .env.development 开发环境
• .env.production 生产环境

# base api
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api/'

// 通过process.env.环境变量名称（名称自定义）
// process.env是Node.js的API
export const baseURL = process.env.VUE_APP_BASE_API

总结：为了灵活配置接口的基准路径，可以基于配置文件的方式，在开发和生产环境分别切换到不同的地址

next('/login')
}

}
})

> 总结：导航守卫要拦截素有请求的路由链接
>
> 1. 判断是否登录
> 2. 判断是否为白名单

## 关于基准路径的配置

> 注意：`.env.development`和`.env.production` 文件用于配置开发环境和生产环境的基准url地址

- .env.development 开发环境
- .env.production 生产环境

```bash
# base api
VUE_APP_BASE_API = 'http://ihrm-java.itheima.net/api/'

// 通过process.env.环境变量名称（名称自定义）
// process.env是Node.js的API
export const baseURL = process.env.VUE_APP_BASE_API

总结：为了灵活配置接口的基准路径，可以基于配置文件的方式，在开发和生产环境分别切换到不同的地址