前后端分离的登录功能实现(nodejs+vue)

1.登录功能

1)准备登录视图

Login.vue

<template>
    <div clss="login-container">
        <el-card header="请先登录" class="login-card">
            <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>

<script>
export default {
    data(){
        return {
            model:{}
        }
    },
    methods:{
        async login(){
            // 向后台发送登录请求
            const res = await this.$http.post('login',this.model);
            console.log(res.data.token);
            // 存储token
            localStorage.token = res.data.token
            console.log(localStorage.token);
            // sessionStorage.token
            // 跳转页面
            this.$router.push('/')
            this.$message({
                type:"success",
                message:"登录成功"
            })
        }
    }
}
</script>

<style >
    .login-card{
        width: 25rem;
        margin: 6rem auto;
    }
</style>

2)在前端路由里配置

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
Vue.use(Router)
const router =new Router({
  routes:[
      // 定义了一个meta 方便前端权限验证
    {path: '/login',name:'Login',component:Login, meta: { isPublic: true } },
]})
// vue router文档
router.beforeEach((to, from ,next) => {
   // 如果要去的页面是不公开的 并且token为空
  if (!to.meta.isPublic && !localStorage.token) {
      //跳转到登录
    return next('/login')
  }
    // 正常情况放行
  next()
})
export default router

3)服务端编写登录接口

用到了一个第三方插件 http-assert

npm i http-assert

作用：当不满足条件时，向前端发送报错信息

app.post('/admin/api/login',async (req,res)=>{
        //解构
        const {username,password} = req.body;    
        // 1. 根据用户名判断用户是否存在
        // 查的时候取出password字段
        const user = await AdminUser.findOne({username}).select('+password');
        // if(!user){
        //     // 如果用户不存在，返回 设置状态码为422
        //     return res.status(422).send({
        //         message: '用户不存在'
        //     })
        // }
    //当user为空时，状态码是422，提示信息是 用户不存在
        assert(user,422,'用户不存在') // 效果与上相同
        // 2.校验密码
        const isValid = require('bcryptjs').compareSync(password,user.password)
        // if(!isValid){
        //     return res.status(422).send({
        //         message:'密码错误'
        //     })
        // }
        assert(isValid,422,'密码错误')
        //3.返回token
        
        //生成一个token 第2个参数是一个密钥，用来验证token是否篡改过
        const token = jwt.sign({id:user._id},app.get('secret'))
        // console.log(token)
        
        res.send({token})
    })
    //错误处理
    app.use(async (err,req,res,next)=>{
        res.status(err.statusCode || 500).send({
            message: err.message
        })
    })

前端封装axios的文件中处理响应

http.js

import axios from 'axios'
import Vue from 'vue'
import router from './router'
const http = axios.create({
    baseURL: 'http://localhost:3000/admin/api'
})
// 全局处理
// https://www.npmjs.com/package/axios#interceptors 文档查看具体使用
// 处理响应
http.interceptors.response.use(res =>{
    return res
},err =>{
    if(err.response.data.message){
        // 处理 错误
        // vue组件弹出消息
        // err.response.data.message 取出服务端返回的错误信息
        Vue.prototype.$message({
            type: 'error',
            message: err.response.data.message
        })
        if (err.response.status === 401) {
            router.push('/login')
        }

    }
    return Promise.reject(err)
})
export default http

2.权限验证

当登录成功时，服务端返回了一个token给前端

所以在登录时获取到token后要把它放到请求头里，

http.js

import axios from 'axios'
import Vue from 'vue'
import router from './router'
const http = axios.create({
    baseURL: 'http://localhost:3000/admin/api'
})
// 全局处理
// https://www.npmjs.com/package/axios#interceptors 文档查看具体使用
// 处理请求
http.interceptors.request.use(function (config) {
    // Do something before request is sent
    if (localStorage.token) {
      config.headers.Authorization = 'Bearer ' + localStorage.token
    }
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
// 处理响应
http.interceptors.response.use(res =>{
    return res
},err =>{
    if(err.response.data.message){
        // 处理 错误
        // vue组件弹出消息
        // err.response.data.message 取出服务端返回的错误信息
        Vue.prototype.$message({
            type: 'error',
            message: err.response.data.message
        })
        if (err.response.status === 401) {
            router.push('/login')
        }

    }
    

    return Promise.reject(err)
})
export default http

后端接口中，当请求数据时，先判断请求头是否携带token并解析token是否正确，验证通过才返回数据，验证不通过则提示请先登录

使用中间件处理

封装middleware->auth.js

module.exports = options => {
    const assert = require('http-assert')
    const jwt = require('jsonwebtoken')
    const AdminUser = require('../models/AdminUser')
  
    return async (req, res, next) => {
       // 获取并截取token
      const token = String(req.headers.authorization || '').split(' ').pop()
      assert(token, 401, '请先登录')
        //根据规格验证获得id
      const { id } = jwt.verify(token, req.app.get('secret'))
      assert(id, 401, '请先登录')
        //通过id去数据库验证是否正确
      req.user = await AdminUser.findById(id)
      assert(req.user, 401, '请先登录')
      await next()
    }
  }

然后在需要使用拦截的地方引用就ok

const authMiddleware = require('../../middleware/auth')
app.use('/admin/api/rest/:resource', authMiddleware(), router)

生成token的第三方插件
npm i jsonwebtoken
引用就可以了
const jwt = require(‘jsonwebtoken’)