零丶前提
- 對Vue全家桶有基本的認知.
- 用有node環境
- 瞭解express
一丶業務分析
1.什麼情況下進行許可權驗證?
- 訪問敏感介面
- 前端向後端敏感介面傳送ajax
- 後端進行session驗證,並返回資訊
- 前端axios攔截返回資訊,根據返回資訊進行操作
- 進行頁面切換
- 頁面切換,觸發vue-router的路由守衛
- 路由守衛根據跳轉地址進行驗證,如需許可權,則傳送ajax至後端驗證介面
- 後端驗證介面進行session驗證,返回資訊
- 前端根據後端返回資訊進行操作
2.前後端進行了怎麼的互動?
- 登入
- 登出
二丶專案環境
-
基礎環境(有興趣自己動手做一遍這個登入註冊的,可進入github克隆基礎環境)
- Vue(前端):vue vuex(儲存狀態) axios(傳送,攔截ajax資訊) vue-router(單頁面路由)
- Express(後端): express(後端伺服器環境)
-
正式開發依賴
- express-session(express中介軟體,用於生成session)
三丶專案開始前
1.建立專案目錄,配置路由,建立頁面跳轉元件
- 專案目錄:
- 建立components/route_list.vue進行頁面跳轉
<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>登入狀態:{{this.$store.state.me.login}}</p>
</div>
</template>
複製程式碼- 建立stores/me.js倉庫,存放登入狀態
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.配置路由: 引入各個頁面,進行路由跳轉配置
後端配置express-session
//serve/app.js檔案 express伺服器
const express = require('express')
//中介軟體--用於下發session
const session = require('express-session')
const app = express()
//使用express-session下發session
app.set('trust proxy', 1)
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
}))
複製程式碼四丶許可權驗證 - 敏感介面
1.主頁Index.vue--訪問敏感介面,展示敏感介面資料
<template>
<div>
//請求後臺資料
<Button @click="getTest">敏感介面</Button>
//請求資訊展示
{{result}}
//頁面跳轉元件
<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.後端的敏感介面接收到請求,進行判斷
app.get('/', function (req, res) {
if(req.session.login){
res.send("hello world")
}else{
res.send(403)
}
})
複製程式碼3.axios--傳送ajax後,對後端返回資料進行攔截,判斷
import axios from 'axios';
import url from 'url';
import router from '../src/router'
//建立axios例項
var instance = axios.create({
baseURL: '/api'
});
//攔截器
instance.interceptors.response.use(
function(response){
return response;
},function(error){
//敏感介面.如果沒有session跳轉登入介面
if(error.response.status==403){
router.push({name:"login"})
}
})
export default instance;
複製程式碼如果返回結果為true,登入狀態,就可以進行訪問敏感介面了.
五丶許可權驗證 - 頁面跳轉
1.路由守衛,對跳轉頁面進行監視
//路由守衛
router.beforeEach((to,from,next)=>{
if(to.name != 'login' && to.name != 'index'){
store.dispatch('me/checkMe')
}
next()
})
複製程式碼2.store中checkme,當跳轉敏感頁面時進行驗證
actions:{
async checkMe({commit}){
//請求/me介面,對登入資訊進行判斷,並保留狀態
const result = await Vue.prototype.$http.get('/me').then(data=>data.data);
//返回值為false,跳轉至login
if(!result){
router.push({name:'login'})
return
}
commit('changeLogin',{result})
}
}
複製程式碼3.後端的檢測登入介面接收到請求,進行判斷
//驗證是否登入
app.get('/me', function (req, res) {
//判斷session是否為true
if(req.session.login){
res.send(true)
}else{
res.send(false)
}
})
複製程式碼如果返回結果為true,登入狀態,就可以進行頁面跳轉了.
六丶登入
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);
//記錄登入狀態
this.$store.commit('me/changeLogin',{result})
}
},
}
</script>
複製程式碼2.後端登入介面接收到請求,生成session
//登入介面,更改session狀態
app.get('/login', function (req, res) {
req.session.login = true,
res.send(true)
})
複製程式碼現在就是登入狀態了
七丶登出
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狀態
//登入介面,更改session狀態
app.get('/login', function (req, res) {
req.session.login = false,
res.send(false)
})
複製程式碼現在就是登出狀態了
完成展示(gif,可能載入不出來):
