Monday, May 20, 2024
Homepage · vue.js
 Popular · Latest · Hot · Upcoming
29
rated 0 times [  31] [ 2]  / answers: 1 / hits: 21790  / 5 Years ago, wed, august 14, 2019, 12:00:00

I have a node.js (express, passport) application with rolling session authentication.



The application is simple enough, just login-password that returns the cookie for the session and a few API functions that are available only with authentication.



I want to use Vue.js as a front-end for that application but I'm unable to find any reliable documentation or a guide on how to implement such authentication in Vue. It seems like there is a heavy focus on JWT.
Is it even possible to do in Vue?



I've tried simply using Axios to call the authentication function



<script>

    import router from ../router    

    import axios from axios    

    export default {    

        name: Login,    

        methods: {    

            login: (e) => {    

                e.preventDefault()    

                let email = [email protected]   

                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>


This works in terms of log in but how do I store the session after I call this API? How do I handle the returned cookie and most importantly make the state of the app itself to the authenticated?


More From » vue.js
 Answers
22

You do not have to do anything on the front-end part (Vue) - everything is done by the back-end.



You will do almost the same as what you do for a JWT - but instead of returning the token as part of the body you will put the token in a 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 })

};


Then each of the other API endpoints will have to validate the token from the 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 })

  } 

});


You may also read these articles:




[#51772] Tuesday, August 6, 2019, 5 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dominics
Add To Favorites
Follow
Total Points: 424
Total Questions: 99
Total Answers: 107
Location: South Korea
Member since Fri, Sep 11, 2020
4 Years ago
dominics questions
Wed, Apr 6, 22, 00:00, 2 Years ago
Mon, Feb 7, 22, 00:00, 2 Years ago
Thu, Jan 13, 22, 00:00, 2 Years ago
Wed, Jan 20, 21, 00:00, 3 Years ago
Fri, Sep 18, 20, 00:00, 4 Years ago
View All
;