这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

前言：

掘金新人一枚，黑马学习大事件项目每日总结，CSS篇幅过长未展示代码

[项目演示地址]www.escook.cn:8086/ev/#/login)

今日内容

控制后台的访问权限

基于路由渲染用户信息组件

控制后台访问权限

未登录禁止访问首页 - 导航守卫

为防止在未登录的情况下跳转其他页面在 router/index.js 中配置全局前置导航守卫; 判断条件有 2 个需要进行拦截:
1. 本地没有 token
2. 不是访问 /login 和 /reg 页面时

 // 使用导航守卫, 进行未登录的权限控制
router.beforeEach((to, from, next) => {
  // 设置白名单
  const whiteList = ['/login', '/reg']
  if (!whiteList.includes(to.path) && !store.state.user.token) {
    // 调用 elementUI 的方法 $message 弹窗告知用户,该方法挂载到了 Vue 的原型上
    Vue.prototype.$message.error('请您先登录')
    return next('/login')
  }
  next()
})

token 值无效时，清空 token，并强制跳转到登录页

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 响应成功的拦截
  // 对响应数据做点什么
  return response
}, function (error) {
  // 响应错误的拦截
  // 对响应错误做点什么
   console.dir(error.response.status)
   console.dir(error.response.data.message)
  return Promise.reject(error)
})

打印错误信息如下：根据错误信息，判断响应状态码为401时清空token并跳转至登录页

function (error) {
    // 响应错误的拦截
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 跳转到 /login
      router.push('/login')
      // 清除过期的 token 和 userInfo
      store.commit('user/updateToken', '')
      store.commit('user/updateUserInfo', {})
      // alert(error.response.data.message)
      // this.$message
      // 给用户一个提示
      Vue.prototype.$message.error(error.response.data.message)
    }
    return Promise.reject(error)
  }

渲染用户信息模块

在 `src/views/Menus` 目录下，新建 `/User/UserInfo.vue` 组件：

<template>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>基本资料</span>
  </div>
  <!-- 表单 -->
</el-card>
</template>

<script>
export default {
name: 'UserInfo'
}
</script>

<style lang="less" scoped>
.el-form {
width: 500px;
}
</style>

在 `src/router/index.js` 模块中，导入 `UserInfo.vue` 组件，并声明对于应的路由规则：

import UserInfo from '@/views/Menus/User/UserInfo.vue'

children: [
      { path: 'home', component: Home },
      // 用户信息的子路由规则
      { path: 'user-info', component: UserInfo }
    ]

渲染表单

利用 element-ui 表单组件渲染表单

<!-- 表单 -->
<el-form :model="userForm" :rules="userFormRules" ref="userFormRef" label-width="100px">
  <el-form-item label="登录名称" prop="username">
  // 禁用用户名输入框
    <el-input v-model="userForm.username" disabled></el-input>
  </el-form-item>
  <el-form-item label="用户昵称" prop="nickname">
    <el-input v-model="userForm.nickname" minlength="1" maxlength="10"></el-input>
  </el-form-item>
  <el-form-item label="用户邮箱" prop="email">
    <el-input v-model="userForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary">提交修改</el-button>
    <el-button>重置</el-button>
  </el-form-item>
</el-form>

将 userInfo 浅拷贝一份给当前表单

export default {
  name: 'UserInfo',
  data () {
    return {
      userForm: {},
      userFormRules: {}
    }
  },
  created () {
    // 基于浅拷贝，把 Vuex 中的用户信息对象复制一份，交给 userForm
    this.userForm = { ...this.$store.state.user.userInfo }
  }
}

浅拷贝后, this.userForm 和 this.userInfo 就是两个对象了, 做到了数据的隔离。修改 userForm 的数据不会影响到 userInfo 的数据, 就不会修改 Vuex 的数据了

3.为表单定义验证规则，根据后台接口获取昵称以及邮箱格式规则

参数名	必选	类型	说明	格式
id	是	number	用户id	数字、整数、最小值为 1
nickname	是	string	昵称	非空字符串、长度 1-10
email	是	string	邮箱	邮箱格式的字符串

userFormRules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '昵称必须是1-10位的非空字符串', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }

下一章节功能实现

用户信息修改功能实现

渲染用户头像组件

基于ElementUI+Vue2前后端《大事件》项目汇总(五)

前言：