This is the repository for the test solution
Instal all dependencies
yarn install
projectRoot/dist
folderfor development mode
yarn dev
for production
yarn build
run database server
yarn db
Open in your browser projectRoot/dist
folder
For production build there is generated report of bundled depedencies, see projectRoot/dist/report.html
There are 2 registered users (see json database file db.json
)
Use json-server api for custom routing, authorization of users, sha256 token generation:
authorization handler
server.get('/authorize', (req, res) => {
const { login, password } = req.query
if (login && password) {
let user = db.users.filter(
(v) => v.login === login && v.password === password
)
if (user.length) {
user = user[0]
const hash = crypto
.createHash('sha256')
.update(JSON.stringify(user) + Date.now())
.digest('hex')
tokens[user.login] = hash
console.log(
'authorization of user = %s, token = %s',
user.login,
hash,
tokens
)
res.jsonp({ authorized: true, token: hash })
} else {
console.log('authorization of user %s failed', user.login, tokens)
res.jsonp({ error: 'User is not found' })
}
}
})
data request handler for authorized users
server.get('/contacts', (req, res) => {
const { token, user } = req.query
if (tokens[user] && tokens[user] === token) {
console.log('authorised user %s asks contacts...', user, db.contacts)
res.jsonp({ data: db.contacts })
} else {
console.log('unauthorised user %s asks contacts!', user)
res.jsonp({ error: 'Access denied!' })
}
})
database server is available at https://localhost:3000
http://localhost:3000/authorize?login=admin&password=123456
http://localhost:3000/contacts?user=admin&token=token
, see token generated aboveAuthor: sa5gap
Source Code: https://github.com/sa5gap/vuejs3-test-user-login
#vue #vuejs #javascript #vuejs3