基于token的前后端分离认证实现
1 主要思路
1. 前端编写导航守卫，如果没有localStorage中没有获取到token，则跳转登录页。
2. 登录页，向后端登录发送，获取token，然后将token存储在localStorage中，跳转首页。
3. 在前端请求拦截器上加上为header加上token，如果有的话。
4. 后端的登录接口，验证完账号密码后，用itsdangerous工具提供的方法生成token，将用户名dump到token中，将此token返回前端。
5. 后端的全局请求验证器（before_request）上，从header中获取出token，用工具解析出token中的用户名，通过request域传递到待执行的函数。
2 相关代码
router.js
import Vue from 'vue' import Router from 'vue-router' import Home from './components/Home.vue' Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './components/About.vue') }, { path: '/login', name: 'login', component: () => import('./components/Login.vue') }, ] }); // 导航守卫 // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆 router.beforeEach((to, from, next) => { if (to.path === '/login') { next(); } else { let token = localStorage.getItem('Authorization'); if (!token) { next('/login'); } else { next(); } } }); export default router;
request.js
import axios from 'axios' // 创建 axios 实例 axios.defaults.headers = { 'Content-Type': 'application/json' }; const service = axios.create({ timeout: 5000 // 请求超时时间 }); // request interceptor 请求拦截器,如果有token则在请求上加上token service.interceptors.request.use( config => { if (localStorage.getItem('Authorization')) { config.headers.token = localStorage.getItem('Authorization'); } return config; }, error => { return Promise.reject(error); }); // response interceptor 返回拦截器 service.interceptors.response.use( response => { //如果返回401,则清除token,跳转登录 if (response.data.code === 401) { localStorage.removeItem('Authorization'); return this.$router.push('/login'); } return response }, error => { console.log('error' + error) // for debug return Promise.reject(error) }); export default service
Login.vue
<template>
<div>
<div>
<input type="text" v-model="loginForm.username" placeholder="用户名"/>
<input type="text" v-model="loginForm.password" placeholder="密码"/>
<button @click="login">登录</button>
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import { login } from '@/api'
import { showMessage } from '@/utils'
export default {
name: 'Login',
components: {},
data () {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
...mapMutations(['changeLogin']), //这样声明后,可以直接使用this.changeLogin 调用定义在store中的mutations中的方法
login () {
if (this.loginForm.username === '' || this.loginForm.password === '') {
alert('账号或密码不能为空');
} else {
login(this.loginForm).then(response => {
if (response.data.code === "0000") {
this.changeLogin({Authorization: response.data.token});
this.$router.push('/');
} else if (response.data.code === "0001") {
showMessage(response.data.msg,"error")
}else{
showMessage("发生系统级错误,请联系110","error")
}
})
}
}
}
}
</script>
后端代码
def login(): result = {"code": "0003"} username = request.json.get("username") password = request.json.get("password") user = models.User.filter(username=username).first() if user and user.password != password: # 密码错误 result["code"] = "0001" result["msg"] = "您可能忘记了密码" return jsonify(result) if not user: # 用户不存在,直接创建新用户,同时创建默认的project newUser = models.User.create(username=username, password=password) models.Project.create(name="default", user_id=newUser.id) logger.info("创建用户：{}成功,创建项目：{}成功".format(username, "default")) token = generate_auth_token(username) result["token"] = token return jsonify(result) ########################################################################################## # 用于生成和验证token from itsdangerous import TimedJSONWebSignatureSerializer as Serializer, SignatureExpired, BadSignature SECRET_KEY = "SECRET_KEY" def generate_auth_token(data,expiration=3600 * 24 * 30): """ 生成token :param data: 用于加密在token中的数据 :param expiration: 过期时间 :return: """ s = Serializer(SECRET_KEY, expires_in=expiration) return s.dumps(data).decode("utf-8") def verify_auth_token(token): """ 验证token :param token: 包含数据的token :return: 返回token中包含的数据 """ s = Serializer(SECRET_KEY) try: data = s.loads(token) except SignatureExpired as e: return None # valid token, but expired except BadSignature as e: return None # invalid token return data ########################################################################################## # 此模块是为了便于管理url from flask import request, session, jsonify from mainApp.api import views from mainApp.settings import NOT_LOGIN_CODE from mainApp.utils.its import verify_auth_token class Router(object): app = None def __init__(self): pass def init(self, app): self.app = app self.add_url_rule() self.register_before_request() # 注册路由拦截 def path(self, rule, view_func, endpoint=None): self.app.add_url_rule(rule, endpoint, view_func, methods=["GET", "POST"]) def is_login(self): if request.path == "/login" or request.path == "/logout": return None token = request.headers.get("token") verify_value = verify_auth_token(token) if verify_value: request.username = verify_value else: return jsonify({"code": NOT_LOGIN_CODE}) def register_before_request(self): self.app.before_request(self.is_login) def add_url_rule(self): path = self.path path('/', views.home) path('/login', views.login) path('/<method>', views.run) path('/mock/<path:i>', views.mock)
