网站开发工程师是什么意思,重庆大学建设管理与房地产学院网站,谷德设计网介绍,无锡市政建设集团网站什么是token#xff1f;token是一个用户自定义的任意字符串#xff0c;目前开发中#xff0c;token都是在服务端生成并且token的值会保存到服务器后台。只有服务器和客户端知道这个字符串#xff0c;于是#xff0c;这个token就成了两者之间的秘钥#xff0c;它可以让服务…什么是tokentoken是一个用户自定义的任意字符串目前开发中token都是在服务端生成并且token的值会保存到服务器后台。只有服务器和客户端知道这个字符串于是这个token就成了两者之间的秘钥它可以让服务器确认请求是来自客户端还是恶意的第三方。为什么使用token简单地说token的使用就是为了数据安全前台是通过接口路径(URL)的调用来获取数据的如果恶意的第三方知道了某一个接口路径那么他便可以直接通过接口路径在网页上直接获取该接口的所有数据信息。如果添加了token类似于这种恶意的行为便不会产生。token是在用户登录的时候产生的在前台登录某一个系统并且获得一个token之后前台需要将该token设置在请求头上以确保之后的每一次请求都是带着该“令牌“的当然后台的接口请求也设置了该请求头。(如果对后台生成token并且对该token的设置以及存储感兴趣的话请关注下一篇文章~~~)基于token验证的流程客户端使用用户名跟密码请求登录服务端收到请求去验证用户名和密码(后台根据请求去数据库查找是否有该用户)验证成功后服务端会签发一个token(该token值一般都会存入Redis数据库中并设置过期时间)再把这个token发送给客户端客户端收到token之后一般存储在localStorage(HTML5新特性只要不手动删除存储的内容存储的信息会一直存在)中客户端每次向服务端请求资源的时候需要带着服务端签发的token服务端收到请求然后去验证客户端请求里面带着的token(token是否为该用户的令牌以及token是否有效等)如果验证成功就向客户端返回请求的数据什么是axiosAxios 是一个基于 promise 的 HTTP 库可以用在浏览器和 node.js 中。vue实现axios拦截token验证在简单介绍完这些基础知识以及用到的插件之后我们便要开始今天的主题--token验证。首先在vue.js 中下载axiosnpm install axios,在main.js文件中全局使用import axios from axios;Vue.prototype.$http axios;复制代码这样引入之后在其他的文件中便可以使用$http来调用接口getRoomDetail() {this.$http.get(this.roomDetailApi).then(res {this.roomDetail res.data.data;},err {console.log(接受数据错误 err);}).catch(err {console.log(服务器错误 err);})}复制代码以上步骤只是简单的实现了前后台的交互(在前台调用后台接口来获取数据)接下来我们便要进一步学习实现token的验证。根据上面的介绍我们在成功登录后台并拿到返回给的token之后需要使用localStorage全局存储实现代码如下// 用户登录login() {this.postData {account: this.userInfo.account,password: this.$md5(this.userInfo.password),};this.$http.post(configIp.apiConfig.user.login, this.postData).then(res {if (res.data.errno 0) {this.$Message.success(登陆成功);this.$router.push(roomInfo);//全局存储tokenwindow.localStorage[token] JSON.stringify(res.data.data.token);} else {this.$Message.error(登录失败);this.forgetPassword true;}}).catch(err {console.log(登录失败);})},复制代码接下来我们要做的就是设置请求头在之后的接口请求过程中都要通过token的认证来获取数据添加 http.js 文件(拦截器)import axios from axios;import router from ./router;// axios 配置axios.defaults.timeout 8000;axios.defaults.baseURL https://api.github.com;// http request 拦截器axios.interceptors.request.use(config {if (localStorage.token) { //判断token是否存在config.headers.Authorization localStorage.token; //将token设置成请求头}return config;},err {return Promise.reject(err);});// http response 拦截器axios.interceptors.response.use(response {if (response.data.errno 999) {router.replace(/);console.log(token过期);}return response;},error {return Promise.reject(error);});export default axios;复制代码添加拦截器之后修改 main.js文件将上面import axios from axios;Vue.prototype.$http axios;复制代码改为import http from ./http; //此处问http文件的路径Vue.prototype.$http http;复制代码完成该步骤之后基本的操作已经实现了下面让我们查看一下是否已经添加请求头以上操作实现了添加请求头token在之后的请求中会自动添加该请求头但是不是每一个页面都需要登录权限(后台会实现不需要进行token验证的筛选)那么前台也需要通过路由的meta标签对需要做校验的路由页面进行标记其他页面则不需要验证代码如下:{path: /userInfo,name: userInfo,meta: {requireAuth: true, // 该路由项需要权限校验}component: userInfo}, {path: /userList,name: userList, // 该路由项不需要权限校验component: userInfo}复制代码之后我们可以定义一个路由防卫每次路由跳转我们都来做一下权限校验参考代码如下router.beforeEach((to, from, next) {if (to.meta.requireAuth) { // 判断该路由是否需要登录权限if (localStorage.token) { // 获取当前的token是否存在console.log(token存在);next();} else {console.log(token不存在);next({path: /login, // 将跳转的路由path作为参数登录成功后跳转到该路由query: {redirect: to.fullPath}})}}else { // 如果不需要权限校验直接进入路由界面next();}});复制代码到此用vue.js实现前台添加请求头通过axios设置拦截器添加token就已经实现了。如果对node.js实现生成token处理token等操作感兴趣希望关注下一篇文章~~~~~