第五章 路由鉤子及外掛開發
前言
本章開始有點深入了哦~請同學們拿出你們的小本本，認真記筆記！上一章我們的登入頁大概邏輯已經理順了，今天我們完善一下。
登入標識（token）
有加群的小夥伴提出登入沒有token，因為我們是自己mock資料的，所以只能寫死返回一個冒牌token~，請開啟src/mock/index.js,把它改造一下，在返回結果中，新增token欄位：
//mock/index.js
import Mock from 'mockjs'
//驗證賬號密碼
let uTable = {
'password': '123456',
'username':"admin",
'token':'abcde12345'
}
const data = Mock.mock('http://user.com/login', (param) => {
let dataJson = JSON.parse(param.body)
if((dataJson.username == uTable.username) && (dataJson.password == uTable.password)) {
let result = {
state: 'ok',
token: uTable.token
}
return result
} else {
let result = {
state: 'no',
token: ''
}
return result
}
})
export default {
data
}
複製程式碼此時在登入元件中，便可以列印出結果，如果賬號密碼匹配的話，你會看到多了token欄位，接著我們要把獲取的toke種到cookie裡，因為有很多地方要操作cookie，我們寫成外掛，方便呼叫。在src下，新建plugins/components/cookies/index.js
//設定cookie
const setCookie = (c_key,c_val,exdays) => {
let exdate=new Date();
exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//儲存的天數
//字串拼接cookie
window.document.cookie=c_key+ "=" +c_val+";path=/;expires="+exdate.toGMTString();
}
//獲取cookie
const getCookie = (c_key) => {
let arr,reg=new RegExp("(^| )"+c_key+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
//刪除cookie
const delCookie = (c_key) => {
let exp = new Date();
exp.setTime(exp.getTime() - 1);
let cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//對外暴露方法
export default {
setCookie,
getCookie,
delCookie
}
複製程式碼為了不必每次呼叫外掛都得引入，我們把它新增為全域性方法，新建plugins/index.js
//plugins/index.js
//引入剛才寫好的外掛
import Cookies from './components/cookies';
export default {
install(Vue,options) {
Vue.prototype.$Cookies = Cookies
}
}
複製程式碼install:當我們在main.js中用Vue.use()的時候，會預設呼叫install方法，並且會返回兩個值：vue例項，可選的options引數。這一步完成後，我們在main.js裡註冊一下。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import Mock from '@/mock/index'
//引入剛才的plugins/index.js
import plugins from '@/plugins'
Vue.use(ElementUI);
//繫結到全域性
Vue.use(plugins);
Vue.config.productionTip = false
Vue.prototype.$http= axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
複製程式碼外掛搞定！然後就可以在任意元件中，通過this.$Cookies.setCookie()來進行呼叫。現在開啟src/pages/user/Login.vue元件，通過我們封裝的cookie外掛，把token種到cookie中：
<template>
<div class="login_page">
<section class="form_contianer">
<div class="manage_tip">
<p>第一個後臺管理系統</p>
</div>
<el-form>
<el-form-item prop="username">
<el-input placeholder="使用者名稱" v-model="uname"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="密碼" v-model="pwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="submit_btn" @click="login">登陸</el-button>
</el-form-item>
</el-form>
</section>
</div>
</template>
<script>
export default {
data() {
return {
uname:'',
pwd:''
}
},
methods: {
login () {
let self = this
this.$http({
method: 'get',
url: 'http://user.com/login',
data: {
username: this.uname,
password: this.pwd
}
})
.then((r) => {
if(r.data.state == 'ok') {
self.$Cookies.setCookie('mytoken',r.data.token)
self.$router.push({path:'/'})
} else {
self.$message.error('賬號或密碼錯誤，請重新填寫');
}
})
}
}
}
</script>
<style scoped>
@import '../../assets/css/login.css';
</style>
複製程式碼cookie種好了，童鞋們可以自行console一下看是否成功，至於怎麼列印，呼叫我們封裝的外掛嘍，如果不會請自行領悟。。種了cookie還沒完，我們還需要在路由跳轉前進行判斷，如果沒有cookie，也就是沒登入，那我們就不允許開啟首頁或其他頁面，這裡就要用到路由鉤子beforeEnter，現在開啟src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/pages/user/Login'
import $Cookies from '@/plugins/components/cookies'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
//路由鉤子，在跳轉前進行判斷
beforeEnter: (to, from, next) => {
console.log($Cookies.getCookie('mytoken'))
if($Cookies.getCookie('mytoken')) {
next()
}else {
next({path:'/login'})
}
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
})
複製程式碼beforeEnter：每個鉤子方法接收三個引數：
- to：即將要進入的目標
- from : 當前導航正要離開的路由
- next(): 進行管道中的下一個鉤子。一定要呼叫該方法來 resolve 這個鉤子。next({ path: '/login' })這個寫法就是把當前路由重定向到我們指定的路由。
這裡要強調一下，為什麼不直接用this.$Cookies來呼叫我們的外掛呢，因為當鉤子執行前，元件例項還沒被建立，this自然也就是個野指標嘍。所以我們只能把外掛引入再呼叫。
結語
繼續廣告下我們的Q群：57991865，歡迎進群交流。
完整程式碼點我，密碼：czkn