基于Vue、Eggjs的用户鉴权模板

VuEgg-jwt-template

此博客已在我的个人网站首发，有兴趣的小伙伴欢迎访问：VuEgg-jwt-template | 大Van家。

---

阅读文档：中文版 | English

简介：开箱即用的 User authentication template——用户权鉴模板。

适用人群：

• 前端开发学习egg框架初学者
• 使用 Vue-egg 架构的开发者
• 或者像 @yesmore 这样又菜又懒的CV工程师

快速开始

开始之前，请确保你有以下环境：

• Nodejs
• Npm（Nodejs自带）
• MySQL 5.7.x

克隆仓库

# git bash
$ git clone git@github.com:yesmore/vue-egg-jwt-template.git
# or http
$ git clone https://github.com/yesmore/vue-egg-jwt-template.git
# or release
https://github.com/yesmore/vue-egg-jwt-template/releases/tag/v1.0.1-release

安装项目

$ cd vue-egg-jwt-template
$ npm i
# Start Front-end
$ npm run dev

$ cd egg-server
$ npm i
# Start Front-end
$ npm run dev

登录页：

• http://localhost:8081/#/login
• …

Api参考：

• http://localhost:7001/jwtlogin
• http://localhost:7001/jwtmsg
• …

模块

版本

m	v
Vue	2.5.2
egg	2.15.1
egg-jwt	3.1.7
mysql2	2.3.0

文件目录

|- egg-server/
	|- app/
		|- controller/
		|- middleware/
		|- model/
		|- service/
		|- view/
		|- router.js
	|- config/
		|- config.default.js
		|- plugin.js
	|- test/
	|- app.js
	|- package.json
	|- ...

|- vue-egg-jwt-template/
	|- build/
	|- config/
		|- dev.env.js
		|- index.js
		|- prod.env.js
	|- src/
		|- assets/
		|- router/
		|- utils/
		|- views/
		|- App.vue
		|- main.js
	|- static/
	|- package.json
	|- ...

交互模型

前端 — (http请求) — Contorller — (service) — MySQL

主要逻辑

• 用户登陆校验（Jwt） app/controller/jwt.js

// method: Post
// Url: http://127.0.0.1:7001/jwtlogin
// body: { user:{ username, password } }
async doLogin() {
   
    let {
    ctx } = this;
    try {
   
        // 1.Get user-info: username & password
        let user =