如何在 Vue.js 中实现基于会话 cookie 的身份验证？

Question

我有一个 node.js（快递，护照）应用程序，具有滚动会话身份验证。

该应用程序非常简单，只有 returns 会话 cookie 的登录密码和一些 API 仅在身份验证时可用的功能。

我想使用 Vue.js 作为该应用程序的前端，但我无法找到有关如何在 Vue 中实现此类身份验证的任何可靠文档或指南。似乎非常关注 JWT。甚至可以在 Vue 中做吗？

我尝试过简单地使用axios调用认证功能

<script>
    import router from "../router"    
    import axios from "axios"    
    export default {    
        name: "Login",    
        methods: {    
            login: (e) => {    
                e.preventDefault()    
                let email = "test@test.com"   
                let password = "password"    
                let login = () => {    
                    let data = {    
                        email: email,    
                        password: password    
                    }    
                    axios.post("/srv/login", data)    
                        .then((response) => {
                            router.push("/loginpage")    
                        })    
                        .catch((errors) => {    
                            console.log("Failed to log in")    
                        })    
                }    
                login()    
            }    
        }    
    }
</script>

这在登录方面有效，但我如何在调用此 API 后存储会话？我如何处理返回的 cookie，最重要的是使应用程序本身的状态成为经过身份验证的状态？

Answer 1

您不必在前端部分 (Vue) 做 任何事情 - 一切都由后端完成。

您将执行与为 JWT 所做的几乎相同的操作 - 但不是将令牌作为正文的一部分返回，而是将令牌放入 cookie 中：

const SECRET_KEY = '123456789'
const expiresIn = '30min'

// Create a token from a payload
function createToken(payload)
{
  return jwt.sign(payload, SECRET_KEY, { expiresIn })
} 

app.post('/login', (req, res, next) =>
{
  const { username, password } = req.body
  const userID = isAuthenticated({ username, password });
  if (userID === 0)
  {
    const status = 401
    const message = 'Incorrect username or password'
    res.status(status).json({ status, message })
    return
  }
  const accessToken = createToken({ id: userID })
  res.cookie('sessionCookieName', accessToken, {httpOnly: true})
  res.status(200).json({ success: true })
};

然后每个其他 API 端点都必须验证来自 cookie 的令牌：

// Verify the token
function verifyToken(token)
{
  return jwt.verify(token, SECRET_KEY)
}

app.get('/getArticle', (req, res, next) =>
{
  var cookie = req.cookies.sessionCookieName;
  try
  {
    verifyToken(cookie)
    next()
  }
  catch (err)
  {
    const status = 401
    const message = 'Unauthorized'
    res.status(status).json({ status, message })
  } 
});

您还可以阅读这些文章：

如何在 Vue.js 中实现基于会话 cookie 的身份验证？

How to implement session cookie based authentication in Vue.js?

vue.js

express-session