Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。

实现登录接口

在后端项目的 controller 包下，新建 LoginController 代码，如下：

package com.qq.first_project.controller;

import com.qq.first_project.common.R;
import com.qq.first_project.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin //跨域
@RequestMapping("/user")
public class LoginController {

    @Autowired
    private UserService userService;
    
    /**
     * 登录
     * @return
     */
    @RequestMapping("/login")
    public R login() {
        return R.ok().data("token","admin");
    }
    
    /**
     * 获取用户信息
     * @return
     */
    @GetMapping("info")
    public R info() {
         return R.ok().data("data",userService.list(null));
    }
    
    /**
     * 退出
     * @return
     */
    @PostMapping("logout")
    public R logout(){
        return R.ok().data("data","logout");
    }
}

接口测试

登录接口测试

退出接口测试

获取登录信息接口测试

实现前端登录功能

第一步：在 src 目录下新建文件夹 api 用于配置接口请求的信息，再在 api 文件夹下新建 login.js 文件，代码如下：

import request from '../utils/request'

export default {
    // 登录
    login() {
        return request({
            url: '/user/login',
            method: 'get'
        })
    },

    // 退出
    loginOut() {
        return request({
            url: '/user/logout',
            method: 'get'
        })
    },

    // 获取用户信息
    info() {
        return request({
            url: '/user/info',
            method: 'get'
        })
    },
}

第二步：先在 login.vue 页面引入 api 中的 login.js：

import loginApi from "../../api/login";

再实现 login 方法即可，代码如下：

login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          loginApi.login().then((response) => {
            if (response.code === 20000) {
              var token = response.data.token;
              if (token !== "") {
                //存储用户角色(先默认写死)
                let getUserRole =
                  this.loginForm.username === "admin" ? "admin" : "user";
                localStorage.setItem("userRole", getUserRole);
                // 存储 token 到 vuex 仓库中（页面刷新会清空）
                this.$store.commit("setToken", token);
                // 存储 token 到浏览器缓存中（清空浏览器缓存会被清理）
                localStorage.setItem("token", token);
                // 页面跳转到首页
                this.$router.push("/main");
              } else {
                this.$message.error("登陆失败！");
              }
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },

页面测试

npm run serve 启动前端项目，浏览器中输入 http://localhost:8120。如果输入的用户名是 admin，登录成功后只能看见 admin 权限下的菜单；如果输入的是非 admin 的用户名，则登陆成功后只能看见 user 权限下的菜单；密码可以随便输，演示效果如下：

ok，临时的登录功能就完成了。