javascript --- [express+ vue2.x + elementUI]登陆的流程梳理

说明

涉及到以下知识点:

登陆的具体流程
express、vue2.x、elementUI、axios、jwt、assert 登陆方面的API使用
中间件的使用
前后端通过http状态码,进行响应的操作(这里主要是401)
密码验证(bcrypt的hashSync方法对明文密码进行加密,compareSync方法对加密的密码进行验证)
token的使用(后端jwt.sign生成token, 前端使用浏览器缓存存储token,后端验证token)

<template><div class="login-container"><el-card header="请先登录" class="login-card"><!-- @submit.native.prevent阻止表单的默认提交行为,并将提交的事件处理函数,绑定到login上 --><el-form @submit.native.prevent="login"><el-form-item label="用户名"><el-input v-model="model.username"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="model.password"></el-input></el-form-item><el-form-item><el-button type="primary" native-type="submit">登录</el-button></el-form-item></el-form></el-card></div>
</template>

逻辑

前端传入用户名和密码

<template><el-form @submit.native.prevent="login"><el-form-item label="用户名"><el-input v-model="model.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="model.password" type="password"></el-input></el-form-item></el-form>
</template>
<script>export default {data(){return {model: {}}},methods:{async login(){// post提交数据,返回的是一个tokenconst res = await this.$http.post('login', this.model)}}}
</script>

后端得到数据后,与数据库进行对比
- 根据用户名,查找数据库中的用户信息
- 对密码使用bcrypt的对比操作
通过验证后,返回一个token

app.post('/admin/api/login', async(req, res)=>{const { username, password } = req.bodyconst AdminUser = require('../../models/AdminUser')// 根据用户名 查找数据库中的用户信息const user = await AdminUser.findOne({username}).select('+password')if(!user) return res.status(422).send({message:'用户名不存在'})// 走到这里,用户查找到了const isValid = password && user.password && require('bcrypt').compareSync(password, user.password)if(!isValid) return res.status(422).send({ message:'密码错误'}) // 到这里就使用jwt生成token并返回了// 首先需要安装: npm i jsonwebtokenconst token = jwt.sign({id: username._id}, app.get('secret'))res.send({token})
})

注意: 上面的jwt.sign接收2个参数,第一个应该是作为区分的一个对象.如用户的id. 第二个是一个密钥字符串.在express中使用app.set(‘secret’, ‘Marron’),将密钥保存在全局app中. 之后使用app.get(‘secret’)获取该密钥.

jwt.sign返回一个散列值,就是我们需要的token

异常处理

http响应并不总是成功的,比如在登录这一块.用户名或密码很容易不成功.这个时候就会返回一个403 forbidden,其中一个比较好的解决方案是: 使用axios的拦截器,对http的返回进行拦截. 若发生错误,使用Vue原型上面的$message.error(前面已经使用elementUI挂载了)方法给出错误提示

// admin/src/http.js
import axios from 'axios'
import Vue from 'vue'const http = axios.create({baseURL: 'http://localhost:3000/admin/api'
})// 拦截返回的http
http.interceptors.response.use(res=>{// http响应是成功的return res},err=>{if(err.message.response.data.message){// http响应失败.使用Vue原型上面的方法弹出错误Vue.prototype.$message.error({type: 'error',message: err.message.response.data.message})return Promise.reject(err)}}
)

前端得到token

前端得到token中,首先将其保存在浏览器缓存中(sessionStorage或localStorage)
然后跳转到首页,在vue中使用this.$router.push('/')
弹出提示框,登录成功, 在vue2.x + elementUI中使用this.$message({ type:'success', message:'登录成功'})

<template><el-form @submit.native.prevent="login"><el-form-item label="用户名"><el-input v-model="model.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="model.password" type="password"></el-input></el-form-item></el-form>
</template>
<script>export default {data(){return {model: {}}},methods:{async login(){// post提交数据,返回的是一个tokenconst res = await this.$http.post('login', this.model)// 将token存入localStorage中(前端磁盘),浏览器关闭了,下次还能访问到localStorage.token = res.data.token// 跳转到首页this.$router.push('/')// 弹出登录成功this.$message({type: 'success',message: '登录成功'})}}}
</script>

登录验证

前端请求添加token

如果用户登录了,那么在浏览器的localStorage中必然会保存token.在发送登录请求给后端时,需要带上这个token.在axios中使用全局的请求拦截(http.interceptors.request.use)来实现这个功能

const http = axios.create({baseURL: 'http://localhost:3000/admin/api'
})
http.interceptors.request.use(config => {if(localStorage.token) {// 给请求头部加tokenconfig.headers.Authorization = 'Bearer ' + localStorage.token}return config},err => {return Promise.reject(err)}
)
// 在使用`config.headers.Authorization`之后,每次http请求都会附带一个 Authorization 请求头.
// Authorization值的最前面加 'Bearer '的原因是为了符合规范

在添加好了对所有路由的前端请求拦截后,如果因为登录原因,出现的错误.后端一般返回的是401状态码,这个时候,需要跳转到登陆页面,下面对状态码 401 的返回值进行处理

const http = axios.create({baseURL: 'http://localhost:3000/admin/api'
})
http.interceptors.response.use(res => { return res},err => {// 这里处理报错if(err.response.data.message){Vue.prototype.$message.error({type: 'error',message: err.response.data.message})// 处理401状态码: 跳转到登陆页面if(err.response.status == 401) router.push('/login')}}
)

后端解析请求头,验证token

以上实现了前端在发送http请求时,携带token(放在Authorization请求头部中),后端需要在前端通过URL请求非登陆接口时,判断用户是否登录.可以写一个登陆验证的中间件. 如果在对正常的路径进行处理之前,先通过中间件验证.

中间件的逻辑如下:

首先通过req.headers.authorization获取token,若无token则设置为 ''
- 若token存在则继续下一步,否则使用assert抛出异常
然后使用jwt验证token.得到解码后的id
- 若存在id,则证明token没有被篡改,继续下一步,否则assert抛出异常
最后根据id在数据库中查询user.并将user赋给req.user.
- 若存在req.user则跳转到下一个中间件,否则使用assert抛出异常

// sever/middleware/auth.js
module.exports = options =>{const assert = require('http-assert') // 简化代码const jwt = require('jsonwebtoken') // 用于将token密文解析为明文const AdminUser = require('../models/AdminUser') // 获取AdminUser模型return async(req, res, next)=>{// 获取tokenconst token = String(req.headers.authorization || '').split(' ').pop()assert(token, 401, '请先登陆')  // 这里若无token: 则代表未登陆const {id} = jwt.verify(token, req.app.get('secret'))assert(id, 401, '请先登陆')  // 这里若无id: 则代表token过期或被篡改了req.user = AdminUser.findById(id)assert(req.user, 401, '请先登录') // 这里若没用找到user, 则代表给的是假idawait next()}
}

以上提供了一个中间件: 它判断token是否存在(正确),若不正确则抛出异常.若正确则继续下一个中间件.在主路由中导入.并在需要的地方添加这个中间件

// server/router/admin/index.js
module.exports = app => {const express = require('express')const authMiddleware = require('../../middleware/auth')const router = express.router({mergeParams: true})app.use('/admin/api/rest/:resource', authMiddleware(), router)
}

上面使用了assert抛出异常,因此还需要一个错误捕捉中间件,放在所有路由的最后,用于捕捉错误,它会将捕获到的异常,作为参数传递给前端.这样前端就能根据状态码做出响应的处理了

// server/router/admin/index.js
module.exports = app => {const express = require('express')const authMiddleware = require('../../middleware/auth')const router = express.router({mergeParams: true})// 放到所有路由的后面app.use(async (err, req, res, next)=>{console.log(err)res.status(err.statesCode || 500).send({ message: err.message})})
}

前端路由校验

上面已经完成了,在发送Http请求时,进行路由校验.若401则跳转到登陆页面.但是,那些不需要HTTP请求的网页还是可以不需要登陆就能直接访问.下面有必要做前端的路由校验

【具体实现如下】:

将不需要登陆的就能访问的(主要是是Login组件)路由,添加一个{isPublic: true}属性
然后使用全局前置守卫,在进入路由前判断localStorage中是否存在token.若存在,则进行下一步,否则跳转到登陆页面. 而登陆页面设置了公开访问属性,因此不会触发全局前置守卫

// admin/src/router/index.js
import Vue from 'vue'
import VurRouter from 'vue-router'
const routes = [{ path: '/login',name: 'login',component: Login,meta: { isPublic: true}},{path: '/',name: 'main',component: Main,children: [ ... ]}
]
const router = new VueRouter({routes
})router.beforeEach((to, from, next) =>{if(!to.meta.isPublic && localStorage.token){return next('/login')}next()
})
export default router

在主函数中加载路由,并渲染更新

// admin/src/main.js
import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'import './style.css'Vue.config.productionTip = falsenew Vue({router,render: h => h(App)
}).$mount('#app')