工作原理
- 前端页面进行登录操作, 将用户名与密码发给服务器;
- 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端
- 前端将token保存在本地中, 建议使用localstorage进行保存. 下次对服务器发送请求时, 带上本地存储的token
- 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端
- 为通过则返回错误码, 提示保错信息, 然后跳转到登录页.
具体步骤
所用技术: vuex + axios + localStorage + vue-router
1、在登录路由添加自定义mate字段, 来记录该页面是否需要身份验证
//router.js { path: "/index", name: "index", component: resolve => require(['./index.vue'], resolve), meta: { requiresAuth: true } }
2、设置路由拦截
router.beforeEach((to, from, next) => { //matched的数组中包含$route对象的检查元字段 //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值 if (to.matched.some(record => record.meta.requiresAuth)) { //判断当前是否有登录的权限 if (!auth.loggedIn()) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } else { next() // 确保一定要调用 next() } })
3、设置拦截器
这里使用axios的拦截器,对所有请求进行拦截判断。
在后面的所有请求中都将携带token进行. 我们利用axios中的拦截器, 通过配置http response inteceptor, 当后端接口返回401 (未授权), 让用户重新执行登录操作。
// http request 拦截器 axios.interceptors.request.use( config => { if (store.state.token) { // 判断是否存在token,如果存在的话,则每个http header都加上token config.headers.Authorization = `token ${store.state.token}`; } return config; }, err => { return Promise.reject(err); }); // http response 拦截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { switch (error.response.status) { case 401: // 返回 401 清除token信息并跳转到登录页面 store.commit(types.LOGOUT); router.replace({ path: 'login', query: {redirect: router.currentRoute.fullPath} }) } } return Promise.reject(error.response.data) // 返回接口返回的错误信息 });
4、将token存储在本地中
可以使用cookies/local/sessionStograge
三者的区别:
- sessionStorage 不能跨页面共享的,关闭窗口即被清除,
- localStorage 可以同域共享,并且是持久化存储的
- 在 local / session storage 的 tokens,就不能从不同的域名中读取,甚至是子域名也不行.
- 解决办法使用Cookie.demo: 假设当用户通过 app.yourdomain.com 上面的验证时你生成一个 token 并且作为一个 cookie 保存到 .yourdomain.com,然后,在 youromdain.com 中你可以检查这个 cookie 是不是已经存在了,并且如果存在的话就转到 app.youromdain.com去。这个 token 将会对程序的子域名以及之后通常的流程都有效(直到这个 token 超过有效期)只是利用cookie的特性进行存储而非验证.
关于XSS和XSRF的防范:
- XSS 攻击的原理是,攻击者插入一段可执行的 JavaScripts 脚本,该脚本会读出用户浏览器的 cookies 并将它传输给攻击者,攻击者得到用户的 Cookies 后,即可冒充用户。
- 防范 XSS ,在写入 cookies 时,将 HttpOnly 设置为 true,客户端 JavaScripts 就无法读取该 cookies 的值,就可以有效防范 XSS 攻击。
- CSRF是一种劫持受信任用户向服务器发送非预期请求的攻击方式。
- 防范 CSRF: 因为 Tokens 也是储存在本地的 session storage 或者是客户端的 cookies 中,也是会受到 XSS 攻击。所以在使用 tokens 的时候,必须要考虑过期机制,不然攻击者就可以永久持有受害用户帐号。
相关文章: XSS 和 CSRF简述及预防措施
//login.vue methods: { login(){ if (this.token) { //存储在本地的localStograge中 this.$store.commit(types.LOGIN, this.token) //跳转至其他页面 let redirect = decodeURIComponent(this.$route.query.redirect || '/'); this.$router.push({ path: redirect }) } } }
在vuex中:
import Vuex from 'vuex'; import Vue from 'vue'; import * as types from './types' Vue.use(Vuex); export default new Vuex.Store({ state: { user: {}, token: null, title: '' }, mutations: { //登录成功将, token保存在localStorage中 [types.LOGIN]: (state, data) => { localStorage.token = data; state.token = data; }, //退出登录将, token清空 [types.LOGOUT]: (state) => { localStorage.removeItem('token'); state.token = null } } });
在./types.js中:
export const LOGIN = 'login'; export const LOGOUT = 'logout';
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 陈随意2008-爱的总铺师[美华][WAV+CUE]
- 裘德《一棵树所创造的》[320K/MP3][56.21MB]
- 裘德《一棵树所创造的》[24bit 48kHz][FLAC/分轨][355.1MB]
- 卓依娜姆《美人谋 网剧影视原声带》[320K/MP3][48.29MB]
- 张星特.2024-流绪呢喃【中视鸣达】【FLAC分轨】
- 邓紫棋.2010-MYSECRET【蜂鸟音乐】【WAV+CUE】
- 江惠仪.2011-感謝您【禾广娱乐】【FLAC分轨】
- 韩红2005-精选[首版][WAV+CUE]
- 张敬轩.2004-A.M/P.M【几何文化】【WAV+CUE】
- 范文芳1999-真心话电影原声带[HYPE][WAV+CUE]
- 袁培华.1990-我写不出一首情歌给我最爱的你【可登】【WAV+CUE】
- 群星.2007-歌林10年流行岁月12CD【歌林】【WAV+CUE】
- 软硬天师.2006-LONG.TIME.NO.SEE【金牌大风】【WAV+CUE】
- 卓依娜姆《美人谋 网剧影视原声带》[FLAC/分轨][162.27MB]
- 国风大师纯音系列《蒋倩 :古筝演奏家》1CD[MP3][160.7MB]