前言：
之前寫了一個node的jwt認證，為了能和node對應，跑通整個流程，前端將設定登入攔截，分別為路由攔截，http攔截。更多檔案請看 github地址
和node server 對應：前端架構之node jwt認證
大致流程：在進行路由跳轉時，利用vue-router提供的鉤子函式beforeEach()對路由進行判斷，符合條件next()，不符合便跳轉到登入頁面。在傳送請求時，統一處理所有http請求和響應，用上 axios 的攔截器，通過配置http resquest interceptors為http頭增加Authorization欄位，其內容為Token，通過配置http response interceptors對返回的資料處理。
目錄結構：
使用vue-cli構建專案，vue init webpack name
主要說一下src檔案吧，assets放置靜態檔案，components放置一些公共元件，pages放置一些主要頁面，router配置路由檔案
在config>index.js配置proxyTable
proxyTable: {
'/api': { // '/api':匹配項
target: 'http://127.0.0.1:3000/',//設定你呼叫的介面域名和埠號 別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': ''//這裡理解成用‘/api’代替target裡面的地址，後面元件中我們掉介面時直接用api代替 比如我要呼叫'http://127.0.0.1:3000/user/add'，直接寫‘/api/user/add’即可
}
}
},複製程式碼路由攔截
在router>index.js中配置beforeEach
//路由跳轉之前
router.beforeEach((to, from, next) => {
if (to.path !== '/login' && !localStorage.token) {
return next('/login')
}
next()
})複製程式碼每個鉤子方法接收三個引數：
* to: Route: 即將要進入的目標 路由物件
* from: Route: 當前導航正要離開的路由
* next: Function: 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next 方法的呼叫引數。
* next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed （確認的）。
* next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。
確保要呼叫 next 方法，否則鉤子就不會被 resolved。
這種方式只是簡單的前端路由控制，並不能真正阻止使用者訪問需要登入許可權的路由。還有一種情況便是：當前token失效了，但是token依然儲存在本地。這時候你去訪問需要登入許可權的路由時，實際上應該讓使用者重新登入。
這時候就需要結合 http 攔截器 + 後端介面返回的http 狀態碼來判斷。
攔截器
新建一個http.js來配置axios攔截器，統一處理所有http請求和響應，就得用上 axios 的攔截器。通過配置http resquest interceptors為http頭增加Authorization欄位，其內容為Token，通過配置http response interceptors，當後端介面返回401 Unauthorized（未授權），讓使用者重新登入。
assets>js>http.js
import axios from 'axios'
const http = axios.create()
// http request 攔截器
// 每次請求都為http頭增加Authorization欄位，其內容為Token
http.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.common['Authorization'] = token;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// http response 攔截器
http.interceptors.response.use(response => {
let data = response.data
if (data.code === 200) {
return data.data
}
if (data.code === 401) {
window.location.href = '/login'
}
return Promise.reject(data)
}, error => {
return Promise.reject(error)
})
export default http複製程式碼至此，就實現了攔截，只需要在登入那邊設定Token並存進localStorage裡便好。
login.vue
login(){
console.log(1111)
this.$http.post('/api/login').then(res => {
localStorage.setItem('token', res)
location.replace('/index')
})
}複製程式碼這樣便可以實現登入認證，可以和之前的node後臺那邊對應，到時候將會慢慢繼續完善...
待續1...
好久都沒完善這個專案了，主要是不知道應該做一個怎麼樣的專案，有想法的可以留言，我可以嘗試做一下，這次稍微完善了一下
看圖，新增了登入介面，和主頁，醜是醜了點，勉強看看吧
主頁，大概分為左邊的導航，右邊的頂部，下面內容，和一個封裝好的自己的元件，大家可以參考一下，主要是在全域性註冊一些自己封裝的元件，就不需在頁面中引用了。
目錄
大概講一下，pages放頁面，pages->base放的是主頁的左邊導航、頭部和內容，chens是放自己封裝的元件
router
稍微改了一下，router的配置
Vue.use(Router)
// 設定預設路由
let defaultRouter = [
]
// 設定其他角色路由
let routerMap = {
}
// 設定通用路由
let routerArr = [
{
path: '/login',
name: 'login',
component: login,
},
{
path: '/index',
component: Layout,
children: [
{
path: '/',
component: resolve => {
require(['@/components/home'], resolve)
}
},
{
path: '/first',
component: resolve => {
require(['@/pages/first/first'], resolve)
}
},
{
path: '/second1',
component: resolve => {
require(['@/pages/second/second1'], resolve)
}
},
{
path: '/second2',
component: resolve => {
require(['@/pages/second/second2'], resolve)
}
}
]
},
{path: '/', redirect: 'login'}
]
const router = new Router({
mode: 'history',
routes: routerArr
})複製程式碼其他的都很簡單的
首頁 layout
引用side-bar 和 headers
<template>
<div class="app">
<side-bar/>
<section class="main">
<headers/>
<section class="page">
<router-view/>
</section>
</section>
</div>
</template>複製程式碼封裝自己的元件
mian.js
import ChenUI from './chens'
Vue.use(ChenUI)
複製程式碼chens->index.js 遍歷元件，匯出
import Chen from './chen/index'
const components = [
Chen
]
// 遍歷元件const install = function (Vue) {
components.forEach(component => {
Vue.component(component.name, component)
})
}
export default install複製程式碼chen->index.vue 接收option、tools
<template>
<div class="chen-search-pager">
<section class="search-pager-warp">
<router-link :to="option.back" class="router-link">
<i class="el-icon-back"></i>
<span class="title">{{this.option.title}}</span>
</router-link>
<div class="tools-warp" v-if="tools">
<el-button v-for="(item, index) in tools" :key="index" @click="btnClick(item)">
<i :class="iconClass(item)"></i>{{item.label}}
</el-button>
</div>
</section>
</div>
</template>
<script>
export default {
name: "chen",
props: {
option: {
type: Object,
default: () => ({})
},
tools: Array
},
data () {
return {
}
},
methods: {
btnClick (item) {
item.func && item.func(item)
},
iconClass (item) {
return 'el-icon-' + item.icon
}
}
}
</script>
<style lang="less" scoped>
.chen-search-pager {
.search-pager-warp {
padding: 10px 20px;
line-height: 40px;
border-bottom: 2px solid #fff;
.router-link {
font-size: 18px;
i {
font-size: 15px;
font-weight: 700;
color: #cc0b8b;
}
.title {
color: #333;
font-size: 16px;
font-weight: 700;
padding-left: 6px;
}
}
.tools-warp {
display: inline-block;
float: right;
&:after {
clear: both;
}
}
.el-button {
border: none;
background: none;
color: #cc0b8b;
}
}
}
</style>
複製程式碼option配置 接收一個物件 title和back
option: {
title: '沒想到吧',
back: '/first'
},複製程式碼tools配置 接收一個陣列
tools: [
{
label: '重新整理',
icon: 'reset',
func: () => { console.log('沒想到吧')}
},
{
label: '新增',
icon: 'plus'
},
{
label: '刪除',
icon: 'delete'
}
]複製程式碼至此就實現了自己的封裝的元件，可以在任意元件中呼叫了...