10.寻光集后台管理系统-用户管理(登录页面)

zx钟

发布于 2022-12-02 16:08:00

1K0

发布于 2022-12-02 16:08:00

文章被收录于专栏：测试游记测试游记

完成注册页面后下面需要完成登录页面

在注册页面文件附近可以找到登录的代码

frontend/src/views/login/index.vue

修改文案

修改左上方文案

右上角是项目的名字和介绍，我们把它替换一下

<div class="login_adv__title">
  <h2>SCUI</h2>
  <h4>{{ $t('login.slogan') }}</h4>
  <p>{{ $t('login.describe') }}</p>
  <div>
    <span>
      <el-icon><sc-icon-vue /></el-icon>
    </span>
    <span>
      <el-icon class="add"><el-icon-plus /></el-icon>
    </span>
    <span>
      <el-icon><el-icon-eleme-filled /></el-icon>
    </span>
  </div>
</div>

这里采用了国际化的方式处理，也就是可以点击切换中英文，可以点击代码进行跳转

frontend/src/locales/lang/zh-cn.js

export default {
  login: {
    slogan: '高性能 / 精致 / 优雅',
    describe: '基于Vue3 + Element-Plus 的中后台前端解决方案。',
    signInTitle: '用户登录',
    accountLogin: '账号登录',
    mobileLogin: '手机号登录',
    ...
    }
}

但是，我们不做国际化，所以直接硬编码

<div class="login_adv__title">
  <h2>寻光集管理系统</h2>
</div>

修改左下方文案

左下方是一个版本的标记

<div class="login_adv__bottom">
  © {{$CONFIG.APP_NAME}} {{$CONFIG.APP_VER}}
</div>

跳转一下来到frontend/src/config/index.js

//标题
APP_NAME: process.env.VUE_APP_TITLE,

//版本号
APP_VER: "1.6.6",

这就需要修改frontend/.env.development文件

# 本地环境
NODE_ENV = development

# 标题
VUE_APP_TITLE = SCUI(DEV)

# 接口地址
VUE_APP_API_BASEURL = https://www.fastmock.site/mock/5039c4361c39a7e3252c5b55971f1bd3/api

# 本地端口
VUE_APP_PORT = 

# 是否开启代理
VUE_APP_PROXY = true

修改VUE_APP_TITLE

# 标题
VUE_APP_TITLE = 寻光集(DEV)

修改后需要重启前端服务，热加载不会重新加载这个文件的修改

修改右侧内容

修改logo

使用一下项目的logo替换掉原来的logo

<div class="login-header">
  <div class="logo">
    <img :alt="$CONFIG.APP_NAME" src="img/logo.png">
    <label>{{$CONFIG.APP_NAME}}</label>
  </div>
</div>

把img/logo.png这个图片换一下就可以了，具体路径在frontend/public/img/logo.png

删除不需要的模式

整个登录部分的代码如下

<div class="login-form">
  <div class="login-header">
    <div class="logo">
      <img :alt="$CONFIG.APP_NAME" src="img/logo.png">
      <label>{{$CONFIG.APP_NAME}}</label>
    </div>
  </div>
  <el-tabs>
    <el-tab-pane :label="$t('login.accountLogin')" lazy>
      <password-form></password-form>
    </el-tab-pane>
    <el-tab-pane :label="$t('login.mobileLogin')" lazy>
      <phone-form></phone-form>
    </el-tab-pane>
  </el-tabs>
  <template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
    <el-divider>{{ $t('login.signInOther') }}</el-divider>
    <div class="login-oauth">
      <el-button type="success" icon="sc-icon-wechat" circle @click="wechatLogin"></el-button>
    </div>
  </template>
</div>

删除手机登录和Tab切换

删除前

<el-tabs>
  <el-tab-pane :label="$t('login.accountLogin')" lazy>
    <password-form></password-form>
  </el-tab-pane>
  <el-tab-pane :label="$t('login.mobileLogin')" lazy>
    <phone-form></phone-form>
  </el-tab-pane>
</el-tabs>

删除后

<password-form></password-form>

删除其他登录方式

其他登录方式入口删除

<template v-if="$CONFIG.MY_SHOW_LOGIN_OAUTH">
  <el-divider>{{ $t('login.signInOther') }}</el-divider>
  <div class="login-oauth">
    <el-button type="success" icon="sc-icon-wechat" circle @click="wechatLogin"></el-button>
  </div>
</template>

其他登录方式弹出对话框删除

<el-dialog v-model="showWechatLogin" :title="$t('login.wechatLoginTitle')" :width="400" destroy-on-close>
  <div class="qrCodeLogin">
    <sc-qr-code class="qrCode" :text="WechatLoginCode" :size="200"></sc-qr-code>
    <p class="msg">{{$tc('login.wechatLoginMsg', 1)}}<br/>{{$tc('login.wechatLoginMsg', 2)}}</p>
    <div class="qrCodeLogin-result" v-if="isWechatLoginResult">
      <el-result icon="success" :title="$tc('login.wechatLoginResult', 1)" :sub-title="$tc('login.wechatLoginResult', 2)"></el-result>
    </div>
  </div>
</el-dialog>

修改账号密码登录组件

从代码可以看到账号密码登录组件为

<password-form></password-form>

import passwordForm from './components/passwordForm'
...

components: {passwordForm},

frontend/src/views/login/components/passwordForm.vue

修改用户名部分

原代码

<el-form-item prop="user">
  <el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
    <template #append>
      <el-select v-model="userType" style="width: 130px;">
        <el-option :label="$t('login.admin')" value="admin"></el-option>
        <el-option :label="$t('login.user')" value="user"></el-option>
      </el-select>
    </template>
  </el-input>
</el-form-item>

不需要选择管理员还是普通用户

登录的字段为username

<el-form-item prop="username">
  <el-input v-model="form.username" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
  </el-input>
</el-form-item>

删除记住账号和忘记密码部分

<el-form-item style="margin-bottom: 10px;">
    <el-col :span="12">
      <el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
    </el-col>
    <el-col :span="12" class="login-forgot">
      <router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
    </el-col>
</el-form-item>

修改登录接口

async login() {

  var validate = await this.$refs.loginForm.validate().catch(() => {
  })
  if (!validate) {
    return false
  }

  this.islogin = true
  var data = {
    username: this.form.user,
    password: this.$TOOL.crypto.MD5(this.form.password)
  }
  //获取token
  var user = await this.$API.auth.token.post(data)
  if (user.code === ) {
    this.$TOOL.cookie.set("TOKEN", user.data.token, {
      expires: this.form.autologin ?  *  *  : 
    })
    this.$TOOL.data.set("USER_INFO", user.data.userInfo)
  } else {
    this.islogin = false
    this.$message.warning(user.message)
    return false
  }
  //获取菜单
  var menu = null
  if (this.form.username === 'admin') {
    menu = await this.$API.system.menu.myMenus.get()
  } else {
    menu = await this.$API.demo.menu.get()
  }
  if (menu.code === ) {
    if (menu.data.menu.length === ) {
      this.islogin = false
      this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
        type: 'error',
        center: true
      })
      return false
    }
    this.$TOOL.data.set("MENU", menu.data.menu)
    this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
  } else {
    this.islogin = false
    this.$message.warning(menu.message)
    return false
  }

  this.$router.replace({
    path: '/'
  })
  this.$message.success("Login Success 登录成功")
  this.islogin = false
}

login函数中

校验请求的字段是否符合规则
加密密码
将账号密码组合成json发送post请求给后端
设置TOKEN、USER_INFO
根据用户名设置菜单权限

使用我们的登录请求frontend/src/api/model/auth.js

login: {
    url: `${config.API_URL1}/users/login/`,
    name: "登录",
    post: async function (data = {}) {
      return await http.post(this.url, data);
    }
  },

修改为

密码不需要加密
使用新的接口

async login() {

  var validate = await this.$refs.loginForm.validate().catch(() => {
  })
  if (!validate) {
    return false
  }

  var data = {
    username: this.form.username,
    password: this.form.password
  }
  //获取token
  var user = await this.$API.auth.login.post(data)
  this.$TOOL.cookie.set("TOKEN", user.token, {
    expires:  *  * 
  })
  window.sessionStorage.setItem('token', user.token)
  window.sessionStorage.setItem('username', user.username)
  this.$TOOL.cookie.set("token", user.token, {
    expires:  *  * 
  })
  this.$TOOL.data.set("USER_INFO", user.userInfo)

  //获取菜单
  var menu = null
  if (this.form.username === 'admin') {
    menu = await this.$API.system.menu.myMenus.get()
  } else {
    menu = await this.$API.demo.menu.get()
  }
  if (menu.code === ) {
    if (menu.data.menu.length === ) {
      this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
        type: 'error',
        center: true
      })
      return false
    }
    this.$TOOL.data.set("MENU", menu.data.menu)
    this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
  } else {
    this.$message.warning(menu.message)
    return false
  }

  this.$router.replace({
    path: '/'
  })
  this.$message.success("Login Success 登录成功")
}

具体修改内容可以见gitee

https://gitee.com/zx660644/light-seeking/commit/c8e4bb208b9a8fd2250650b934cd1c19001a073a