站长资讯网
最全最丰富的资讯网站

vue中token用法是什么

vue中token是在服务端产生的一串字符串,以作客户端进行请求的一个令牌;其使用方法如:1、封装操作localstorage本地存储的方法;2、在封装好storage后,将其挂载到全局组件中;3、在“request.js”里放入“token”;4、在router下的“index.vue”里设置路由守卫即可。

vue中token用法是什么

本教程操作环境:Windows10系统、vue3版、DELL G3电脑

vue中token用法是什么?Vue中如何使用token

一.了解用法
1.了解(session,cookie)token
Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背景下,Token便应运而生。
token 是在服务端产生的一串字符串,以作客户端进行请求的一个令牌。如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端。前端可以在每次请求的时候带上 Token 证明自己的合法地位。如果这个 Token 在服务端持久化(比如存入数据库),那它就是一个永久的身份令牌(除非设置了有效期)。

2.token 优点
Token 完全由应用管理,所以它可以避开同源策略
Token 可以避免 CSRF 攻击
Token 可以是无状态的,可以在多个服务间共享
减轻服务器的压力,减少频繁的查询数据库,使服务器更加健壮。
1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

二.实际使用
1.封装一个本地缓存的方法
在src下新建一个storage文件夹,文件夹里新建index.vue
代码如下:

// 封装操作localstorage本地存储的方法  模块化  var storage = {   set(key, value) {     localStorage.setItem(key, JSON.stringify(value))   },   get(key) {     return localStorage.getItem(key) != 'undefined' ? JSON.parse(localStorage.getItem(key)) : undefined  },   getForIndex(index) {     return localStorage.key(index)   },   getKeys() {     let items = this.getAll()     let keys = []     for (let index = 0; index < items.length; index++) {       keys.push(items[index].key)     }     return keys  },   getLength() {     return localStorage.length  },   getSupport() {     return (typeof (Storage) !== 'undefined')   },   remove(key) {     localStorage.removeItem(key)   },   removeAll() {     localStorage.clear()   },   getAll() {     let len = localStorage.length // 获取长度    let arr = new Array(len) // 定义数据集    for (var i = 0; i < len; i++) {       // 获取key 索引从0开始       var getKey = localStorage.key(i)       // 获取key对应的值       var getVal = localStorage.getItem(getKey)       // 放进数组       arr[i] = {         'key': getKey,        'val': getVal      }     }     return arr  }}export default storage
登录后复制

2.封装好storage后,把他挂载到全局组件中
打开src下的main.js
加上一句代码:

Vue.prototype.$storage = storage;
登录后复制

3.在request.js里放入token
至于request是什么,具体可以参考另一篇文档:“Vue如何成功调用一个动态数据接口+解决跨域问题”:该文档链接点击跳转
其中的方法二具体描述了request.js

每次跳转路由前,判断 localStroage(或vuex) 中有无 token,或者是否过期(可以写在封装Axios的请求拦截器中或者router的路由守卫中)
request.js代码如下

import axios from 'axios'import storage from '@/storage'import router from '@/router'// create an axios instance const service = axios.create({   baseURL: '/api', // url = base url + request url   timeout: 5000 // request timeout})// 添加请求拦截器,若token存在则在请求头中加token,不存在也继续请求 service.interceptors.request.use(   config => {     // 每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器,没有则不带token     // Authorization是必须的    let tokenInfo = storage.get('TOKEN')     const token = tokenInfo ? tokenInfo.accessToken : null     const tokenType = token ? tokenInfo.tokenType.substring(0, 1).toUpperCase() + tokenInfo.tokenType.substring(1) + ' ' : null    if (token && tokenType) {       config.headers.Authorization = tokenType + token    }     return config  },   error => {     console.log('在request拦截器检查到错误:', error.response)     return Promise.reject(error)   })// respone拦截器 service.interceptors.response.use(   response => {     return response  },   error => {     // 在status不正确的情况下,判别status状态码给出对应响应    if (error.response) {       console.log('在respone拦截器检查到错误:')       switch (error.response.status) {         case 204:           error.response.data.error = '204:No Content(没有内容)'           break         case 401:           // 可能是token过期,清除它           storage.remove('tokenInfo')           location.reload() // 刷新页面,触发路由守卫           error.response.data.error = '401:Unauthorized(未经授权)'           break         case 403:           error.response.data.error = '403:Forbidden(被禁止的)'           break         case 500:           error.response.data.error = '500:服务器内部错误'           break         default:          return error      }       return Promise.reject(error.response.data.error)     }      return Promise.reject(error)   })export default service
登录后复制

4.在路由,router下的index.vue里设置路由守卫
整个index代码如下:

import Vue from 'vue'import Router from 'vue-router'import Login from '@/views/login';import Main from '@/main/index';import tip1 from '@/views/tip1';import tip2 from '@/views/tip2';import tip3 from '@/views/tip3';import storage from '@/storage'Vue.use(Router)const routes = [{     path: '/',     name: 'Login',     // redirect: '/login',     component: Login,  },  {     path: "/login",     component: Login,  },  {     path: '/Main',     component: Main,     children: [{         path: '/',         name: 'Tip1',         component: tip1      },      {         path: '/tip1',         name: 'Tip1',         component: tip1      },      {         path: '/tip2',         name: 'Tip2',         component: tip2,         meta: {           requireAuth: true         }       },      {         path: '/tip3',         name: 'Tip3',         component: tip3      },    ]   }]const router = new Router({   routes})// 设置路由守卫,在进页面之前,判断有token,才进入页面,否则返回登录页面 router.beforeEach((to, from, next) => {   // 默认requiresAuth为false才不需要登录,其他都要   // to.matched.some(r => r.meta.requireAuth) or to.meta.requiresAuth  if (to.matched.some(r => r.meta.requireAuth) !== false) {     let tokenInfo = storage.get('TOKEN')     if (tokenInfo) {       console.log("有token")       next();      } else {       storage.remove('TOKEN')       next({         path: "/login",         query: {           redirect: to.fullPath        } // 将刚刚要去的路由path(却无权限)作为参数,方便登录成功后直接跳转到该路由      });     }    } else {     next(); //如果无需token,那么随它去吧  }});//暴露router实例export default router // 1.将调用登录接口成功以后,把后端传过来的token放入本地缓存 // 2.路由跳转之前执行路由守卫,实例化一个Router对象,使用该对象内置方法beforeEach,在路由跳转前判断该页面是否设置了token,获取token // 如果有token,next()继续执行路由跳转 // 如果没有token,跳转去登录界面
登录后复制

哪个页面需要路由守卫。就给他加上参数

meta: {           requireAuth: true         }
登录后复制

推荐学习:《vue视频教程》

赞(0)
分享到: 更多 (0)