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

Question

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

该应用程序非常简单，只需返回会话 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 })
  } 
});

您还可以阅读这些文章：

• https://www.codementor.io/mayowa.a/how-to-build-a-simple-session-based-authentication-system-with-nodejs-from-scratch-6vn67mcy3
• https://www.thepolyglotdeveloper.com/2018/12/manage-sessions-https-nodejs-vuejs/