教育项目--登录【22】

最新推荐文章于 2024-06-17 13:21:32 发布

原创最新推荐文章于 2024-06-17 13:21:32 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

记录一下，下周开始会快速的进行更新，因为优快云每天的发布会有限制，所以还是会及时更新新的内容。
这章呢主要是为了前端框架的主题的模板而进行的后台登录模块的编写，为了前端启动的时候进入页面时，调用的是我们后台写好的接口方法。
话不多说，开始吧

一、修改登录页

将config目录中的dev.env.js文件中进行修改（可以直接复制）

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
  // 修改的时候的Http和Https
  BASE_API: '"http://localhost:8001"',
})

二、分析登录接口

因为在登录的时候前端框架启动的时候会执行login.js文件的中login(username, password)和getInfo(token)方法，登录和登录之后获取用户信息的方法。所以创建两个接口进行替换该方法

先看一下原先的模板中的方法内容

 actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(username, userInfo.password).then(response => {
          const data = response.data
          setToken(data.token)
          commit('SET_TOKEN', data.token)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo(state.token).then(response => {
          const data = response.data
          if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
            commit('SET_ROLES', data.roles)
          } else {
            reject('getInfo: roles must be a non-null array !')
          }
          commit('SET_NAME', data.name)
          commit('SET_AVATAR', data.avatar)
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          removeToken()
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit('SET_TOKEN', '')
        removeToken()
        resolve()
      })
    }
  }
}

可以看出共有三个方法：

登录返回token
获取用户信息返回用户信息
登出返回状态

三、编写登录接口

package com.djr.eduservice.controller;

import com.djr.commonutils.R;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.web.bind.annotation.*;

/**
 * @Program: 前端框架使用的登录接口
 * @Description
 * @Author: 涛涛 * ^ *
 * @Create: 2021-01-23 22:18
 **/
@Api(description="登录模块")
@RestController
@RequestMapping("/eduService/login")
public class EduLoginController {
    /**
     * 模拟登录
     * @return
     */
    @ApiOperation(value = "用户登录")
    @PostMapping("/login")
    public R login() {


        return R.ok().data("token", "admin");
    }

    /**
     * 模拟获取用户信息
     * @return
     */
    @ApiOperation(value = "获取用户信息")
    @GetMapping("/info")
    public R info() {


        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }


}