koa --- seesion實現登錄鑒權

koa + vue + session 實現一個簡單的登錄邏輯

/login component/login-session.html

<!DOCTYPE html><head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head><body><div id="app"><div><input v-model="username" /><input v-model="password" /></div><div><button @click="login">Login</button><button @click="logout">Logout</button><button @click="getUser">GetUser</button></div><div><button @click="logs=[]">Clear Log</button></div><!-- 日志 --><ul><li v-for="(log, idx) in logs" :key="idx">{{log}}</li></ul></div><script>// 這行代碼很關鍵,請求時攜帶cookieaxios.defaults.withCredentials = true;axios.interceptors.response.use(response => {app.logs.push(JSON.stringify(response.data));return response;});var app = new Vue({el: '#app',data: {username: "test",password: "test",logs: []},methods: {login: async function() {await axios.post("http://localhost:3000/users/login", JSON.stringify({username: this.username,password: this.password}))},logout: async function() {await axios.post("http://localhost:3000/users/logout", JSON.stringify({username: this.username}))},getUser: async function() {await axios.get("http://localhost:3000/users/getUser");}}});</script>
</body></html>

注:

axios.defaults.withCredentials = true: 前端發出請求時,攜帶 cookie
axios.post(url,params)時,params 一定要使用 JSON.stringify 轉換成 JSON 格式.否則會出現請求方法為 OPTION.
axios.interceptors.response.use(cb): 對響應的信息進行攔截處理.

下面搭一個最基礎的后端.

const Koa = require('koa')
const app = new Koa()// 路由
const Router = require('koa-router')
const router = new Router({ prefix: '/users' })router.post('/login', async ctx => {ctx.body = {ok: 1,message: '登錄成功'}
})router.post('/logout', async ctx => {ctx.body = {ok: 1,message: '登出成功'}
})router.post('/getUser', async ctx => {ctx.body = {ok: 1,message: '獲取用戶成功'}
})app.use(router.routes())
app.listen(3000)

說明:

const router = new Router({ prefix: '/users' }): 給路由添加一個前綴,即在后面 router.post(’/’,cb), 處理的是 http://localhost:3000/users 路由
以上的 html 是運行在 file 協議下(vscode 下使用 alt + B 快捷打開),而服務端是 http 協議.當 html 上通過 axios.post 方法請求服務器時,會發生跨域.于是下面需要添加跨域
由于使用到了 POST 方法,因此,在服務端也添加上 bodyParser.(注: bodyParser 一定要放在 koa-router 前面加載)

// post 請求解析
const bodyParser = require('koa-bodyparser')
app.use(bodyParser())// 跨域
const cors = require('koa2-cors')
app.use(cors())

說明:

如果您按照我的代碼一步一步的敲,那么當您敲到這里,代碼應該理所當然的不能運行.打開 google 瀏覽器,在控制臺可以看見以下的一段話
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.:提示的很明顯,就是說需要在返回頭部加上一個 “Access-Control-Allow-Credentials”: true 字段
根據 koa2 的洋蔥模型,只需在所有的路由前面加上如下代碼即可

router.post('*', async (ctx, next) => {ctx.set('Access-Control-Allow-Credentials', true)await next()
})
router.get('*', async (ctx, next) => {ctx.set('Access-Control-Allow-Credentials', true)await next()
})

說明:

如果您按照我的代碼一步一步的敲,那么當您敲到這里基本的前后端交互算是完成了,下一步需要使用 session
首先看如下代碼:

// session(配置)
const session = require('koa-session')
app.kets = ['marron rain']const SESSION_CONFIG = {key: 'marron:session'
}
app.use(session(SESSION_CONFIG, app))// session(使用)
// 改寫login
router.post('/login', async ctx => {// 登錄邏輯ctx.session.userinfo = "marron";ctx.set("Content-Type", "application/json");ctx.body = {ok: 1,message: '登錄成功',}
})
router.post('/logout', async ctx => {delete ctx.session.userinfo;ctx.body = {ok: 1,message: '退出系統'}})router.get('/getUser', async ctx => {ctx.body = {ok: 1,message: '獲取用戶成功',userinfo: ctx.session.userinfo}
})

說明:

此時,后端可以處理登錄、登出、以及獲取信息.(僅僅只是根據不同路由返回不同的信息,并未進行邏輯處理)
實現簡單的邏輯

在處理 getUser 路由請求時,先檢查一下session中是否有信息
使用router.post 的第二個參數, 傳入中間件.
/login component/middleware/auth.js

module.exports = async (ctx, next) =>{if(!ctx.session.userinfo) {ctx.body = {ok: 0,message: '用戶未登錄'}} else {await next();}
}

將router.get('/getUser')改寫如下:

router.get('/getUser', require('./middleware/auth'), async ctx =>{ctx.body = {ok: 1,message: '獲取用戶成功',userinfo: ctx.session.userinfo} 
})

說明:

在執行回調函數之前,會先執行監測,檢查session中是否存在userinfo信息.
邏輯基本完成.但是此時的session信息只是存在內存中,并未真正實現持久化.

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250515.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250515.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250515.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！