前言:
之前写了一个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'
}
]
至此就实现了自己的封装的组件,可以在任意组件中调用了...