统一登陆实现简化流程

发布于:2024-04-14 ⋅ 阅读:(176) ⋅ 点赞:(0)

比如,前端使用vue,后端使用abp框架

则首先需要一个统一的中央认证服务,来给每个后端服务通信以验证用户凭据,并返回访问令牌,

中央认证服务保存各自后端的令牌,后端服务使用JWT或其他机制验证令牌的有效性。

1、前端登录请求中央认证服务,返回认证服务自己的令牌

2、然后根据前端请求过来的接口路径判断向那个后端服务发送之前保存的对应后端token,让对应后端服务验证自己token是否正确

实际登录列子

vue 使用多个后端统一登录怎么做

在Vue中使用多个后端进行统一登录,通常需要以下步骤:

  1. 设置中央认证服务:一个REST API,负责处理所有登录请求。

  2. 每个后端服务设置路由以处理来自认证服务的令牌验证请求。

  3. 在Vue应用中,创建一个登录表单,将用户输入发送到中央认证服务。

  4. 认证服务与每个后端服务通信以验证用户凭据,并返回相应的访问令牌。

以下是一个简化的示例:

后端认证服务 (Node.js 示例)

const express = require('express');
const app = express();
 
app.post('/login', (req, res) => {
  // 假设有一个验证用户凭据的函数
  authenticateUser(req.body.username, req.body.password).then(token => {
    res.json({ token });
  }).catch(err => {
    res.status(401).send('Unauthorized');
  });
});
 
function authenticateUser(username, password) {
  // 验证用户凭据,生成令牌,并返回
}
 
app.listen(3000, () => {
  console.log('Authentication service listening on port 3000');
});

Vue 前端登录表单

<template>
  <div>
    <form @submit.prevent="login">
      <input type="text" v-model="username" placeholder="Username">
      <input type="password" v-model="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      axios.post('http://localhost:3000/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 存储令牌,进行后续请求
        localStorage.setItem('token', response.data.token);
        // 跳转到主页或其他页面
      }).catch(error => {
        // 处理登录失败
      });
    }
  }
};
</script>

后端服务 (假设每个后端服务都有相应的路由设置) 

// 假设每个后端服务都有一个路由来验证令牌
app.get('/api/data', authenticateToken, (req, res) => {
  // authenticateToken 中间件会检查令牌,如果有效则继续
  res.send(data);
});
 
function authenticateToken(req, res, next) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (token == null) return res.sendStatus(401);
 
  jwt.verify(token, process.env.SECRET_KEY, (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

在这个例子中,Vue前端应用会向认证服务发送登录请求,认证服务会与每个后端服务通信以验证用户凭据,并返回访问令牌。后端服务使用JWT或其他机制验证令牌的有效性。

请注意,这只是一个简化示例,实际应用中你需要处理更多安全性相关的问题,如跨站请求伪造(CSRF)保护、跨站脚本(XSS)防护、加密数据传输等。


网站公告

今日签到

点亮在社区的每一天
去签到