Isomorphic JavaScript with MEVN stack，第四部分------用户验证，JWT，会话管理

最新推荐文章于 2024-11-09 21:44:05 发布
最新推荐文章于 2024-11-09 21:44:05 发布
阅读量171 收藏
点赞数
文章标签： vue.js node.js mongodb nosql es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jackofalltrades/article/details/115999475
版权

User Authentication, JWTs, and Session Management

01_JSON Web Tokens

npm install jsonwebtoken --save

  • 增加dev-server/services/auth-service.js
import jwt from 'jsonwebtoken';

export function generateJWT(user){
  const tokenData = { username: user.username, id: user._id };
  return jwt.sign({ user: tokenData }, process.env.TOKEN_SECRET );
}
  • 修改dev-server/config/env.js，增加process.env.TOKEN_SECRET
import express from "express";
import morgan from "morgan";
import cors from "cors";
import bodyParser from "body-parser";

export function setEnvironment(app) {
  if (process.env.NODE_ENV !== "production") {
    setDevEnv(app);
  } else {
    setProdEnv(app);
  }
}

function setDevEnv(app) {
  //   console.log("setting development environment");
  process.env.NODE_ENV = "development";
  process.env.DB_URL = "mongodb://localhost:27017/mevn-dev-db";
  process.env.TOKEN_SECRET = "my-development-secret";
  app.use(bodyParser.json());
  app.use(morgan("dev"));
  app.use(cors());
}

function setProdEnv(app) {
  process.env.DB_URL = "mongodb://localhost:27017/mevn-prod-db";
  process.env.TOKEN_SECRET = "my-production-secret";
  app.use(bodyParser.json());
  app.use(express.static(__dirname + "/../dist"));
  console.log("setting production environment");
}

修改dev-server\api\auth\auth-controller.js，为认证的用户返回token

import * as StringUtil from "../../utilities/string-util";
import User from "../../model/user-model";
import bcrypt from "bcrypt-nodejs";
import { generateJWT } from "../../services/auth-service";

export function index(req, res) {
  // console.log(req.body, req.body.username.toLowerCase());
  const validation = validateIndex(req.body);
  if (!validation.isValid) {
    return res.status(400).json({ message: validation.message });
  }
  User.findOne({ username: req.body.username.toLowerCase() }, (error, user) => {
    console.log(user);
    if (error) {
      return res.status(500).json();
    }
    if (!user) {
      return res.status(401).json();
    }
    /* const passwordMatch = true;
       babel编译调用错误
       const passwordMatch = User.passwordMatches( req.body.password, user.password );
       验证密码是否正确 */
    const passwordMatch = bcrypt.compareSync(req.body.password, user.password);
    if (!passwordMatch) {
      return res.status(401).json({ message: "User not exist!" });
    }
    // 为认证的用户返回token
    const token = generateJWT(user);
    return res.status(200).json({ token: token });
  });
}

function validateIndex(body) {
  let errors = "";
  if (StringUtil.isEmpty(body.username)) {
    errors += "Username is required. ";
  }
  if (StringUtil.isEmpty(body.password)) {
    errors += "Password is required. ";
  }

  return {
    isValid: StringUtil.isEmpty(errors),
    message: errors,
  };
}

使用Postman，测试认证的用户返回token

post测试认证用户返回token

02 Vue.js and JSON Web Tokens

修改src\services\AuthService.js， 替换原来的fakeToken，使用服务端返回的token

import store from "../store";
import http from "./HttpService";

export function isLoggedIn() {
  const token = localStorage.getItem("token");
  return token != null;
}

/* export function login() {
  const token = {
    username: "morpheus",
  };
  setToken(token);
} */

export function login(user) {
  return http()
    .post("/auth", user)
    .then((res) => {
      if (res) {
        /* const fakeToken = {
          token: "my-token",
        }; 
        setToken(fakeToken);
        */
        setToken(res.data.token);
      }
    });
}

function setToken(token) {
  // localStorage.setItem("token", JSON.stringify(token));
  localStorage.setItem("token", token); // 已经是文本，无需JSON.stringify
  store.dispatch("authenticate");
}

export function getUsername() {
  return "morpheus";
}

export function getUserId() {
  return 1;
}

export function registerUser(user) {
  return http().post("/register", user);
}

浏览器测试

Save Res Token

03 User Authentication

  • 修改src/services/AuthService.js， 增加logout方法
export function logout() {
  localStorage.clear();
  store.dispatch("authenticate");
}
  • 修改src\components\Navbar.vue， 增加条件判断显示导航菜单
<template>
  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top custom-bg-dark">
      <router-link to="/" class="navbar-brand">
        <img style="max-height:25px" src="../assets/logo.png"/>
        Task Manager
      </router-link>
      <!-- <a class="navbar-brand" href="#">
        <img style="max-height:25px" />
        Task Manager
      </a> -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <!-- <ul class="navbar-nav mr-auto"> -->
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <router-link to="/" class="nav-link" exact>Home</router-link>
          </li>
          <li v-if="$store.state.isLoggedIn" class="nav-item">
            <router-link to="/tasks" class="nav-link" exact>Tasks</router-link>
            <!-- <a class="nav-link" href="#">Link</a> -->
          </li>
          <li v-if="!$store.state.isLoggedIn" class="nav-item">
            <router-link to="/register" class="nav-link" exact>Register</router-link>
          </li>
          <li v-if="!$store.state.isLoggedIn" class="nav-item">
            <router-link to="/login" class="nav-link" exact>Login</router-link>
          </li>
          <li v-if="$store.state.isLoggedIn" class="nav-item">
            <a v-on:click.prevent="logout()" class="nav-link" href="#">Logout</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              {{ this.$store.state.username ?
              this.$store.state.username : 'User' }}
            </a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
</template>

<script>
import * as auth from '../services/AuthService';

export default {
  name: 'Navbar',
  methods: {
    logout: function(){
      auth.logout();
      this.$router.push({ name: 'home' });
    }
  }
}
</script>

修改src\router\index.js，替换原来的fake字段，const isLoggedIn = true;

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Login from "../views/authentication/Login.vue";
import Register from "../views/authentication/Register.vue";
import TasksAll from "../views/tasks/TasksAll.vue";
import TasksCreate from "../views/tasks/TasksCreate.vue";
import TasksEdit from "../views/tasks/TasksEdit.vue";
import * as auth from "../services/AuthService";

Vue.use(VueRouter);

// const isLoggedIn = true;

const routes = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/tasks",
      name: "tasks-all",
      component: TasksAll,
      beforeEnter: (to, from, next) => {
        // if (isLoggedIn) {
        if (auth.isLoggedIn()) {
          next();
        } else {
          next("/login");
        }
      },
    },
    {
      path: "/tasks/new",
      name: "tasks-create",
      component: TasksCreate,
      beforeEnter: (to, from, next) => {
        if (auth.isLoggedIn()) {
          next();
        } else {
          next("/login");
        }
      },
    },
    {
      path: "/tasks/:id",
      name: "tasks-edit",
      component: TasksEdit,
      beforeEnter: (to, from, next) => {
        if (auth.isLoggedIn()) {
          next();
        } else {
          // 没有登录跳转到登录页面
          next("/login");
        }
      },
    },
    {
      path: "/register",
      name: "register",
      component: Register,
      beforeEnter: (to, from, next) => {
        if (!auth.isLoggedIn()) {
          // 没有登录跳转到注册页面
          next();
        } else {
          next("/");
        }
      },
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      beforeEnter: (to, from, next) => {
        if (!auth.isLoggedIn()) {
          next();
        } else {
          next("/");
        }
      },
    },
    {
      path: "*",
      redirect: "/",
    },
  ],
  linkActiveClass: "active",
});

// router guards
/*
routes.beforeEach((to, from, next) => {
  if (auth.isLoggedIn()) {
    next();
  } else {
    next("/login");
  }
});
*/
export default routes;

04 Validating a User's Session

  • 修改dev-server/services/auth-service.js， 增加方法requireLogin，decodeToken

import jwt from "jsonwebtoken";

export function generateJWT(user) {
  const tokenData = { username: user.username, id: user._id };
  return jwt.sign({ user: tokenData }, process.env.TOKEN_SECRET);
}

export function requireLogin(req, res, next) {
  const token = decodeToken(req);
  if (!token) {
    return res.status(401).json({ message: "You mast be logged in." });
  }
  next();
}

export function decodeToken(req) {
  const token = req.headers.authorization || req.headers["authorization"];

  if (!token) {
    return null;
  }

  try {
    return jwt.verify(token, process.env.TOKEN_SECRET);
  } catch (error) {
    return null;
  }
}
  • 修改dev-server\api\task\tasks-routes.js， 增加登录验证
import express from "express";
const router = express.Router();
import * as controller from "./tasks-controller";
import * as auth from "../../services/auth-service";

router.post("/task", auth.requireLogin, controller.create);
router.get("/task", auth.requireLogin, controller.index);
router.get("/task/:id", auth.requireLogin, controller.show);
router.put("/task", auth.requireLogin, controller.update);
router.delete("/task", auth.requireLogin, controller.remove);

export default router;
  • 使用postman测试get http://localhost:3000/api/task

没有token，请求会失败，Headers中设置token才能请求到task

没有token请求task

Header中设置token才能请求成功

  • 修改/src/services/AuthService.js， 增加方法getToken
export function getToken(){
	return localStorage.getItem('token');
}
  • 修改src\services\HttpService.js，增加保存token到header中
import store from "../store";
import axios from "axios";
import * as auth from "./AuthService";

export default function http() {
  return axios.create({
    baseURL: store.state.apiUrl,
    headers: {
      Authorization: auth.getToken(),
    },
  });
}

05 Managing User's Session

  • 修改dev-server/services/auth-service.js，增加方法getUsername，getUserId
import jwt from "jsonwebtoken";

export function generateJWT(user) {
  const tokenData = { username: user.username, id: user._id };
  return jwt.sign({ user: tokenData }, process.env.TOKEN_SECRET);
}

export function requireLogin(req, res, next) {
  const token = decodeToken(req);
  if (!token) {
    return res.status(401).json({ message: "You mast be logged in." });
  }
  next();
}

export function decodeToken(req) {
  const token = req.headers.authorization || req.headers["authorization"];

  if (!token) {
    return null;
  }

  try {
    return jwt.verify(token, process.env.TOKEN_SECRET);
  } catch (error) {
    return null;
  }
}

export function getUsername(req) {
  const token = decodeToken(req);
  if (!token) {
    return null;
  }
  return token.user.username;
}
export function getUserId(req) {
  const token = decodeToken(req);
  if (!token) {
    return null;
  }
  return token.user.id;
}
  • 修改dev-server/api/task/tasks-controller.js， 把测试的id，替换成从token中获取的id
import User from "../../model/user-model";
import Task from "../../model/task-model";
import moment from "moment";
import * as auth from "../../services/auth-service";

export function index(req, res) {
  // FIND ALL TASKS
  Task.find({}, (error, tasks) => {
    if (error) {
      return res.status(500).json();
    }
    return res.status(200).json({ tasks: tasks });
  }).populate("author", "username", "user");
}

export function create(req, res) {
  /* CREATE TASK
     const id = 10; */
  const userId = auth.getUserId(req);
  User.findOne({ _id: userId }, (error, user) => {
    if (error && !user) {
      return res.status(500).json();
    }
    const task = new Task(req.body.task);
    task.author = user._id;
    task.dueDate = moment(task.dueDate);

    task.save((error) => {
      if (error) {
        return res.status(500).json();
      }
      return res.status(201).json();
    });
  });
}

export function update(req, res) {
  /* UPDATE TASKS
     const id = 10; */
  const userId = auth.getUserId(req);
  User.findOne({ _id: userId }, (error, user) => {
    if (error) {
      return res.status(500).json();
    }
    if (!user) {
      return res.status(404).json();
    }

    const task = req.body.task;
    task.author = user._id;
    task.dueDate = moment(task.dueDate);
    Task.findByIdAndUpdate({ _id: task._id }, task, (error) => {
      if (error) {
        return res.status(500).json();
      }
      return res.status(204).json();
    });
  });
}

export function remove(req, res) {
  /* Delete a task
     const id = 5; */
  const userId = auth.getUserId(req);
  Task.findOne({ _id: req.params.id }, (error, task) => {
    if (error) {
      return res.status(500).json();
    }
    if (!task) {
      return res.status(404).json();
    }
    if (task.author._id.toString() !== userId) {
      return res
        .status(403)
        .json({ message: "Not allowed to delete another user's post" });
    }
    Task.deleteOne({ _id: req.params.id }, (error) => {
      if (error) {
        return res.status(500).json();
      }
      return res.status(204).json();
    });
  });
}

export function show(req, res) {
  // GET TASK BY ID
  Task.findOne({ _id: req.params.id }, (error, task) => {
    if (error) {
      return res.status(500).json();
    }
    if (!task) {
      return res.status(404).json();
    }
    return res.status(200).json({ task: task });
  });
}
  • 修改src/services/AuthService.js，增加decodeToken方法，替换getUsername，getUserId中的假数据
import store from "../store";
import http from "./HttpService";
import jwt from "jsonwebtoken";

export function isLoggedIn() {
  const token = localStorage.getItem("token");
  return token != null;
}

/* export function login() {
  const token = {
    username: "morpheus",
  };
  setToken(token);
} */

export function login(user) {
  return http()
    .post("/auth", user)
    .then((res) => {
      if (res) {
        /* const fakeToken = {
          token: "my-token",
        }; 
        setToken(fakeToken);
        */
        setToken(res.data.token);
      }
    });
}

function setToken(token) {
  // localStorage.setItem("token", JSON.stringify(token));
  localStorage.setItem("token", token); // 已经是文本，无需JSON.stringify
  store.dispatch("authenticate");
}

export function logout() {
  localStorage.clear();
  store.dispatch("authenticate");
}

export function getUsername() {
  // return 'morpheus';
  const token = decodeToken();
  if (!token) {
    return null;
  }
  return token.user.username;
}

export function getUserId() {
  // return 1;
  const token = decodeToken();
  if (!token) {
    return null;
  }
  return token.user.id;
}

export function registerUser(user) {
  return http().post("/register", user);
}

export function getToken() {
  return localStorage.getItem("token");
}

function decodeToken() {
  const token = getToken();
  if (!token) {
    return null;
  }
  return jwt.decode(token);
}

 

jackofalltrades
关注
Isomorphic-JavaScript-with-MEVN-Stack:带MEVN堆栈的同构JavaScript [视频]，由Packt发布
05-28
具有MEVN堆栈的同构JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的所有支持项目文件。 关于视频课程 您是否要构建可扩展的高性能Web应用程序？ 利用JavaScript生态系统的功能来运行，构建...
node+koa+jsonwebtoken鉴权jwt实战
Suk__的博客
11-12 1122
涉及到的库: 如果对jwt不熟悉的话可以去了解一下前置知识:node实现jwt 主要是依靠jsonwebtoken的两个api: 生成token: sign() 校验token: verify() 这是我封装后的jwtUtils: import jwt from 'jsonwebtoken'; import { sha256 } from "./cryptoUtils"; import { Context } from "koa"; import logger from './lo..
node生成token与验证token(typeScript语法)
温壁
12-22 1444
1、首先安装jsonwebtoken (c)npm install jsonwebtoken -S 2、根据前端发送的登录信息，生成对应token import { Router,Request,Response } from "express"; import jwt from 'jsonwebtoken'; export default (router:Router) => { router.post('/',(req:Request,res:Response) => {
python使用json web token (jwt)实现http api的加密传输
Faith的博客
08-22 3898
CSRF攻击原理图: 20150119003530_89131.jpg 上图中Browse是浏览器，WebServerA是受信任网站/被攻击网站A，WebServerB是恶意网站/攻击网站B。 一开始用户打开浏览器，访问受信任网站A，输入用户名和密码登陆请求登陆网站A。网站A验证用户信息，用户信息通过验证后，网站A产生Cookie信息并返回给浏览器。用户登陆网站A成功后，可以
【web】JWT（Json web token）的原理、签发、验证
冰冷的希望的博客
10-30 1039
1.JWT JWT（Json web token）是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准。该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景 http协议本身是一种无状态的协议，而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证。后来出现了cookie和session，传统的session认证虽然安全，但是本身很难得到扩展，不方便在多台服务器认证，一般会增大开销，而且还可能会造成CSRF攻击 而token认证机制不需要考虑用户在哪一台服务器
React学习：条件渲染
若水弹丸之地
04-15 5812
React 中的条件渲染就和在 JavaScript 中的条件语句一样。通过 JavaScript 条件操作符(如 if ) 根据不同的条件 来决定创建渲染不同的元素，并且让 React 更新匹配的 UI 。 仔细阅读代码，你会发现这一章对你收获最大的是怎么让代码写的更简单优雅。 一、怎么用 看下面dome就懂了,顺便看看我们 在多个页面写react 与 在一个页面写react的区别...
isomorphic-lab:同构React实验
05-18
此存储库用于通过 0.13.X， 1.0.0-betaX和编写同构JavaScript应用的实验。 它在两端使用进行表单显示和验证-但是，可以使用任何可以手动填充其表单字段并根据其属性和状态显示错误消息的组件来手动完成此操作。 ...
isomorphic-dompurify:使以相同方式在服务器和客户端上使用DOMPurify成为可能
05-12
同构DOMPurify 该库使以相同的方式在服务器和客户端上无缝使用成为可能。 它本身不执行任何操作，只是在DOMPurify周围提供了同等/通用的包装器，因此所有功劳归DOMPurify的作者和贡献者所有。 ...
isomorphic-jsx:一个由JSX支持的模板库，用于构建多页网站
05-01
npm install --save isomorphic-jsx npm install --save-dev @babel/core @babel/preset-react 您还需要使用用于babel预设的react预设来安装和设置babel。 用法 您需要在.babelrc设置以下.babelrc ： { presets :...
isomorphic-webcrypto:适用于Node，React Native和IE11 +的webcrypto库
04-28
注意：如果要执行跨平台的jwt操作，请考虑基于isomorphic-webcrypto构建的或 （用于OpenID Connect）安装npm install isomorphic-webcrypto 用法下面有一个简单的哈希示例，但。 此示例要求您npm install hex-lite ...
解决vue运行报错 if (process.env.NODE_ENV === ‘production‘) 和 打包报错Error in plugin “gulp-shell“
热门推荐
weixin_44982333的博客
04-11 1万+
启动的报错 <% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %> 打包的报错 throw new TypeError('Invalid Version: ' + version); ^ TypeError: Invalid Version: E:\����...
VUE 常见问题汇总
一个有故事的胖子
12-19 3654
问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本   /* cnpm website: https://npm.taobao.org/ */   npm install -g cnpm --registry=https://registry.npm.taobao.org     ...
Vue 状态管理工具vuex
gklcsdn的博客
11-07 465
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 解决了多个组件共享状态时，状态的可维护性和可预测性问题。
前端基础面试题·第四篇——Vue（其三）
最新发布
2301_76380626的博客
11-09 529
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 317
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 514
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
fastapi_socketio连接vue的socktio.client
u014220146的博客
11-06 407
所以默认配置是客户端连接时使用的路径时ws，而不是http， 并且路径还要带上socketio.io。提示：如果遇到跨域问题自行解决。
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 119
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 755
vue3组件应用 + 以及组件相关知识应用
Meteor-Cookies：实现跨客户端和服务器的同构cookie管理
在Web开发中，cookie通常被用于跟踪用户状态、存储用户偏好设置、进行会话管理等。一个防弹cookie意味着它能够抵抗各种攻击，比如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。Meteor-Cookies:client所提供的这种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值