利用nuxt.js中間件怎么實(shí)現(xiàn)攔截權(quán)限判斷
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)利用nuxt.js中間件怎么實(shí)現(xiàn)攔截權(quán)限判斷，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
鄭州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！
項(xiàng)目環(huán)境
"element-ui":"^2.3.4",
"flyio":"^0.5.2",
"js-cookie":"^2.2.0",
"nuxt":"^1.4.0",
一：首先登錄頁(yè)面
在登錄頁(yè)面script中引入
import Cookie from 'js-cookie' //npm install js-cookie --save
在script里加上
data(){
return{
redirectURL:'/'
}
},
mounted() {
let rediretUrl = this.$route.query.ref;
if (rediretUrl){
this.redirectURL = rediretUrl
}
}接著在methods里面編寫一個(gè) submitLogin的方法
submitLogin(ev) {
var _this = this;
this.$refs.ruleForm2.validate((valid) => {
if (valid) {
_this.logining = true
var sendData = {
username: _this.ruleForm2.account,
password: _this.ruleForm2.pass,
is_remember: _this.isRemember
};
//登錄操作
_this.$https.post('login/index', sendData).then(res => {
if (res.status == 1) {
//將服務(wù)端的token存入cookie當(dāng)中
Cookie.set('token', res.data.token)
//返回上一頁(yè)
_this.$router.push(_this.redirectURL)
}else{
_this.$message.warning(res.msg)
}
})
} else {
return false;
}
});
},二：nuxt中間件middleware編寫權(quán)限攔截
新建一個(gè)userAuth.js，目錄結(jié)構(gòu)如下
代碼如下
import utils from '~/utils/utils'
export default function ({route, req, res, redirect}) {
let isClient = process.client;
let isServer = process.server;
let redirectURL = '/login';
var token, path
//在服務(wù)端
if (isServer) {
let cookies = utils.getcookiesInServer(req)
path = req.originalUrl;
token = cookies.token ? cookies.token : ''
}
//在客戶端判讀是否需要登陸
if (isClient) {
token = utils.getcookiesInClient('token')
path = route.path;
}
if (path) {
redirectURL = '/login?ref=' + encodeURIComponent(path)
}
//需要進(jìn)行權(quán)限判斷的頁(yè)面開(kāi)頭
if (!token) {
redirect(redirectURL)
}
}utils.js里面的方法
import Cookie from 'js-cookie'
export default {
//獲取服務(wù)端cookie
getcookiesInServer:function (req) {
let service_cookie = {};
req && req.headers.cookie && req.headers.cookie.split(';').forEach(function (val) {
let parts = val.split('=');
service_cookie[parts[0].trim()] = (parts[1] || '').trim();
});
return service_cookie;
},
//獲取客戶端cookie
getcookiesInClient:function (key) {
return Cookie.get(key) ? Cookie.get(key) : ''
}
}到這里，我們的中間件，權(quán)限判斷依據(jù)完成了
三：運(yùn)用到項(xiàng)目中
在項(xiàng)目中。例如，用戶信息設(shè)置頁(yè)面，需要進(jìn)行是否登錄判斷
pages/user/setting.vue
我們?cè)陧?yè)面中運(yùn)用剛剛編寫的userAuth中間。
middleware: 'userAuth',
上述就是小編為大家分享的利用nuxt.js中間件怎么實(shí)現(xiàn)攔截權(quán)限判斷了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：利用nuxt.js中間件怎么實(shí)現(xiàn)攔截權(quán)限判斷
URL地址：http://m.jiaotiyi.com/article/gjgsij.html