(十九)在线教育网站搭建一管理员登录实现

jwt vue token

1. 管理员数据库设计

drop table if exists edu_admin;

create table edu_admin(
 id char(19) not null comment '管理员ID',
 username varchar(50) default null comment '管理员姓名',
 password varchar(255) default null comment '管理员密码',
 introduction varchar(100) default null comment '签名',
 avatar varchar(255) default null comment '管理员头像',
 gmt_create datetime not null comment '创建时间',
 gmt_login datetime not null comment '登录时间',
 gmt_modified datetime not null comment '更新时间',
 primary key(id)
)

select * from edu_admin;

drop table if exists edu_admin_role; 

create table edu_admin_role(
 id char(19) not null comment '权限ID',
 role_name varchar(50) not null comment '权限名',
 admin_id char(19) not null comment '管理员ID',
 gmt_create datetime not null comment '创建时间',
 gmt_modified datetime not null comment '更新时间',
 primary key(id)
)

select * from edu_admin_role;

2. 插入一条数据

2.1. controller

@PostMapping("/insert")
public R insert(@RequestBody AdminVo adminVo){
    boolean flag = eduAdminService.insert(adminVo);
    if(flag){
        return R.ok().message("管理员\'"+adminVo.getUsername()+"\'注册成功");
    }else{
        return R.error().message("管理员\'"+adminVo.getUsername()+"\'注册失败");
    }
}

2.2. service - 同时插入管理员表和权限表

public boolean insert(AdminVo adminVo) {

    EduAdmin eduAdmin = new EduAdmin();
    BeanUtils.copyProperties(adminVo,eduAdmin);

    String password = adminVo.getPassword();
    password = DigestUtils.md5DigestAsHex(password.getBytes());
    eduAdmin.setPassword(password);

    int flag = baseMapper.insert(eduAdmin);

    if (flag>0){

        List<String> roles = adminVo.getRoles();
        for (String role:roles){

            EduAdminRole eduAdminRole = new EduAdminRole();
            eduAdminRole.setAdminId(eduAdmin.getId());
            eduAdminRole.setRoleName(role);

            boolean flagRole = eduAdminRoleService.insert(eduAdminRole);

            return flagRole;

        }
    }
    return flag>0;
}

3. 后端登入和登出路由-controller

@PostMapping("/login")
    public R login(@RequestBody LoginParam param){
       String token= eduAdminService.exist(param);

       if (token == null){
           return R.error().message("账号或密码错误");
       }else{
           return R.ok().data("token",token);
       }

    }

    @GetMapping("/getInfo")
    public R getInfo(@RequestParam  String token){

        Map<String,Object> map=eduAdminService.getInfo(token);
        return R.ok().data("admin",map);

    }

    @PostMapping("logout")
    public R logout(){
        return R.ok();
    }

4. 后端登入和登出方法实现-service

@Override
    public String exist(LoginParam param) {

        String name = param.getUsername();
        String password = param.getPassword();
        password = DigestUtils.md5DigestAsHex(password.getBytes());

        QueryWrapper<EduAdmin> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username",name);
        queryWrapper.eq("password",password);

        EduAdmin admin= baseMapper.selectOne(queryWrapper);

        if(admin!=null){
            String jwt = JwtUtils.generateJWT(admin);
            return jwt;
        }
        return null;
    }

    @Override
    public Map<String, Object> getInfo(String token) {

        Claims claims = JwtUtils.checkJWT(token);
        String name = (String)claims.get("username");
        String avatar = (String) claims.get("avatar");
        String id = (String) claims.get("id");

        Map<String,Object> map = new HashMap<>();
        map.put("username",name);
        map.put("avatar",avatar);

        QueryWrapper<EduAdminRole> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("admin_id",id);
        List<EduAdminRole> adminRoles = eduAdminRoleService.selectList(queryWrapper);

        //得到所有角色
        List<String> roles = new ArrayList<>();
        for (EduAdminRole eduAdminRole:adminRoles){
            String roleName=eduAdminRole.getRoleName();
            roles.add(roleName);
        }

        map.put("roles",roles);

        return map;
    }

5. 前端方法定义-api/user.js

import request from '@/utils/request'

const base = '/eduadmin/edu-admin'

export function login(searchObj) {
      return request({
        url: `${base}/login`,
        method: 'post',
        data:searchObj
    })
}

export function getInfo(token) {
  return request({
    url: `${base}/getInfo`,
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: `${base}/logout`,
    method: 'post'
  })
}

6. 前端请求-store/modules/user.js

将token存在cookie中和请求头中

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

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

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        console.log(response)
        const roles = response.data.admin.roles
        if (!roles || roles.length==0) {
          reject('管理员必须有权限')
        }

        const username = response.data.admin.username
        const avatar = response.data.admin.avatar

        commit('SET_NAME', username)
        commit('SET_AVATAR', avatar)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout().then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

7. Cookie定义 - /utils/auth.js

import Cookies from 'js-cookie'

const TokenKey = 'logintoken'

export function getToken() {
  return Cookies.get(TokenKey)
}

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

export function removeToken() {
  return Cookies.remove(TokenKey)
}

8. 请求头中加入token - /utils/request.js

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['Authorization'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

9. 请求头

10. Cookie