Vue+Express實現(xiàn)登錄注銷功能的實例代碼
- 對Vue全家桶有基本的認(rèn)知.
- 用有node環(huán)境
- 了解express
一丶業(yè)務(wù)分析
1.什么情況下進(jìn)行權(quán)限驗證?
訪問敏感接口
- 前端向后端敏感接口發(fā)送ajax
- 后端進(jìn)行session驗證,并返回信息
- 前端axios攔截返回信息,根據(jù)返回信息進(jìn)行操作
進(jìn)行頁面切換
- 頁面切換,觸發(fā)vue-router的路由守衛(wèi)
- 路由守衛(wèi)根據(jù)跳轉(zhuǎn)地址進(jìn)行驗證,如需權(quán)限,則發(fā)送ajax至后端驗證接口
- 后端驗證接口進(jìn)行session驗證,返回信息
- 前端根據(jù)后端返回信息進(jìn)行操作
2.前后端進(jìn)行了怎么的交互?
登錄
注銷
二丶項目環(huán)境
基礎(chǔ)環(huán)境( 有興趣自己動手做一遍這個登錄注冊的,可進(jìn)入github克隆基礎(chǔ)環(huán)境 )
- Vue(前端):vue vuex(存儲狀態(tài)) axios(發(fā)送,攔截ajax信息) vue-router(單頁面路由)
- Express(后端): express(后端服務(wù)器環(huán)境)
正式開發(fā)依賴
- express-session(express中間件,用于生成session)
三丶項目開始前
1.創(chuàng)建項目目錄,配置路由,創(chuàng)建頁面跳轉(zhuǎn)組件
項目目錄:
創(chuàng)建components/route_list.vue進(jìn)行頁面跳轉(zhuǎn)
<template>
<div>
<p><router-link :to="{name:'index'}">主頁</router-link></p>
<p><router-link :to="{name:'login'}">登錄</router-link></p>
<p><router-link :to="{name:'logout'}">注銷</router-link></p>
<p><router-link :to="{name:'me'}">個人信息</router-link></p>
<p>登錄狀態(tài):{{this.$store.state.me.login}}</p>
</div>
</template>
創(chuàng)建stores/me.js倉庫,存放登錄狀態(tài)
import Vue from 'vue'
import router from '../router';
export default{
namespaced:true,
state:{
login :false
},
mutations:{
changeLogin(state,{result}){
state.login = result;
}
},
actions:{
async checkMe({commit}){
const result = await Vue.prototype.$http.get('/me').then(data=>data.data);
if(!result){
router.push({name:'login'})
return
}
commit('changeLogin',{result})
}
}
}
views中 新建Login,Logout,Signin,me組件
路由信息寫在router.js中
2.配置路由: 引入各個頁面,進(jìn)行路由跳轉(zhuǎn)配置
后端配置express-session
//serve/app.js文件 express服務(wù)器
const express = require('express')
//中間件--用于下發(fā)session
const session = require('express-session')
const app = express()
//使用express-session下發(fā)session
app.set('trust proxy', 1)
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
}))
四丶權(quán)限驗證 - 敏感接口
1.主頁Index.vue--訪問敏感接口,展示敏感接口數(shù)據(jù)
<template>
<div>
//請求后臺數(shù)據(jù)
<Button @click="getTest">敏感接口</Button>
//請求信息展示
{{result}}
//頁面跳轉(zhuǎn)組件
<route_list></route_list>
</div>
</template>
<script>
import route_list from '../components/route_list'
export default {
components:{
route_list
},
data(){
return{
result:""
}
},
methods:{
//請求敏感接口
async getTest(){
this.result = await this.$http.get("/").then(res=>res.data)
}
}
}
</script>
2.后端的敏感接口接收到請求,進(jìn)行判斷
app.get('/', function (req, res) {
if(req.session.login){
res.send("hello world")
}else{
res.send(403)
}
})
3.axios--發(fā)送ajax后,對后端返回數(shù)據(jù)進(jìn)行攔截,判斷
import axios from 'axios';
import url from 'url';
import router from '../src/router'
//創(chuàng)建axios實例
var instance = axios.create({
baseURL: '/api'
});
//攔截器
instance.interceptors.response.use(
function(response){
return response;
},function(error){
//敏感接口.如果沒有session跳轉(zhuǎn)登錄界面
if(error.response.status==403){
router.push({name:"login"})
}
})
export default instance;
如果返回結(jié)果為true,登錄狀態(tài),就可以進(jìn)行訪問敏感接口了.
五丶權(quán)限驗證 - 頁面跳轉(zhuǎn)
1.路由守衛(wèi),對跳轉(zhuǎn)頁面進(jìn)行監(jiān)視
//路由守衛(wèi)
router.beforeEach((to,from,next)=>{
if(to.name != 'login' && to.name != 'index'){
store.dispatch('me/checkMe')
}
next()
})
2.store中checkme,當(dāng)跳轉(zhuǎn)敏感頁面時進(jìn)行驗證
actions:{
async checkMe({commit}){
//請求/me接口,對登錄信息進(jìn)行判斷,并保留狀態(tài)
const result = await Vue.prototype.$http.get('/me').then(data=>data.data);
//返回值為false,跳轉(zhuǎn)至login
if(!result){
router.push({name:'login'})
return
}
commit('changeLogin',{result})
}
}
3.后端的檢測登錄接口接收到請求,進(jìn)行判斷
//驗證是否登錄
app.get('/me', function (req, res) {
//判斷session是否為true
if(req.session.login){
res.send(true)
}else{
res.send(false)
}
})
如果返回結(jié)果為true,登錄狀態(tài),就可以進(jìn)行頁面跳轉(zhuǎn)了.
六丶登錄
1.登錄頁Login.vue - 請求登錄接口,登錄成功后將信息保存到store
<template>
<div>
<h1>登錄</h1>
<Button @click="login">登錄</Button>
<route_list></route_list>
</div>
</template>
<script>
import route_list from '../components/route_list'
export default {
components:{
route_list
},
methods:{
async login(){
//請求登錄接口
const result = await this.$http.get("/login").then(data=>data.data);
//記錄登錄狀態(tài)
this.$store.commit('me/changeLogin',{result})
}
},
}
</script>
2.后端登錄接口接收到請求,生成session
//登錄接口,更改session狀態(tài)
app.get('/login', function (req, res) {
req.session.login = true,
res.send(true)
})
現(xiàn)在就是登錄狀態(tài)了
七丶注銷
1.登錄頁Logout.vue - 請求注銷接口,注銷成功后將信息保存到store
<template>
<div>
<h1>注銷</h1>
<Button @click="login">注銷</Button>
<route_list></route_list>
</div>
</template>
<script>
import route_list from '../components/route_list'
export default {
components:{
route_list
},
data(){
return{
}
},
methods:{
async login(){
const result = await this.$http.get("/logout").then(data=>data.data);
this.$store.commit('me/changeLogin',{result})
}
},
}
</script>
2.后端注銷接口接收到請求,更改session狀態(tài)
//登錄接口,更改session狀態(tài)
app.get('/login', function (req, res) {
req.session.login = false,
res.send(false)
})
現(xiàn)在就是注銷狀態(tài)了
總結(jié)
以上所述是小編給大家介紹的Vue+Express實現(xiàn)登錄注銷功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
進(jìn)入Hooks時代寫出高質(zhì)量react及vue組件詳解
這篇文章主要介紹了Hooks時代中如何寫出高質(zhì)量的react和vue組件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
mpvue 項目初始化及實現(xiàn)授權(quán)登錄的實現(xiàn)方法
這篇文章主要介紹了mpvue 項目初始化及實現(xiàn)授權(quán)登錄的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了vue使用watch監(jiān)聽props的一些小建議,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue-admin-template?報Uncaught?(in?promise)?error問題及解決
這篇文章主要介紹了Vue-admin-template?報Uncaught?(in?promise)?error問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
echarts設(shè)置tootip輪播切換展示(vue3搭配vue-echarts粘貼即用)
這篇文章主要為大家介紹了echarts設(shè)置tootip輪播切換展示效果,vue3搭配vue-echarts粘貼即用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2023-10-10
Vue.js是構(gòu)建Web界面的漸進(jìn)式JavaScript框架,通過簡潔的 API 提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng),這篇文章主要給大家介紹了關(guān)于Vue.js中讓人容易忽略的API的相關(guān)資料,需要的朋友可以參考下2021-09-09
下面小編就為大家分享一篇Vue之Vue.set動態(tài)新增對象屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue2.0利用 v-model 實現(xiàn)組件props雙向綁定的優(yōu)美解決方案
本篇文章主要介紹了Vue2 利用 v-model 實現(xiàn)組件props雙向綁定的優(yōu)美解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
vue實現(xiàn)播放后端flask發(fā)送的mp3文件
這篇文章主要為大家詳細(xì)介紹了vue如何實現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章要給大家介紹的是vue和drf以及第三方滑動驗證碼接入的實現(xiàn)，下文小編講詳細(xì)講解該內(nèi)容，感興趣的小伙伴可以和小編一起來學(xué)習(xí)奧2021-10-10