前后端分离实践

项目源码

主要技术栈:vue + vue-router +  axios + koa2

 

遇到的问题:

一.前后端分离解决端口冲突。

可直接采用proxy的方式,将所有api的接口都转到 target 。

clinet中新建 proxy.js

//proxy.js
module.exports = {
    proxyList: {
        '/api': {
            target: 'http://localhost:3001',
            changeOrigin: true
        }
    }
}

二.基于前后端分离的身份认证方式——JWT(Json web token)

 

1.基于token的鉴权机制

基于token的鉴权机制类似于http协议也是无状态的,它不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了,这就为应用的扩展提供了便利。

具体流程如下:

1、用户使用用户名密码来请求服务器
2、服务器进行验证用户的信息 服务器通过验证发送给用户一个token。
3、 客户端存储token,并在每次请求时附送上这个token值 服务端验证token值,并返回数据。
4、这个token必须要在每次请求时传递给服务端,它应该保存在请求头里。

 

import axios from 'axios'
import util from '../util'

// http request 拦截器
axios.interceptors.request.use(
    config => {
        let token = util.getCookie('token')
        if (token) {
            // 判断是否存在token,如果存在的话,则每个http header都加上token
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

export const api = axios

 

使用 router.beforeEach 注册一个全局前置守卫:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import User from '@/components/User'
import Login from '@/components/LoginRegister'
import Util from '@/util'

Vue.use(Router)

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
            meta: {
                verification: true
            }
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/user',
            name: 'User',
            component: User
        }
    ]
})

router.beforeEach((to, from, next) => {
    if (to.meta.verification && !Util.getCookie('token')) {
        next({
            path: '/login',
            query: {
                redirect: to.fullPath
            }
        })
    } else {
        next()
    }
})

export default router

 

发表评论