vue中的token 怎么运用
发布时间：2023-07-19 11:00:20 所属栏目：教程 来源：互联网
导读： 这篇文章主要介绍了vue中的token怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中的token怎么使用文章都会有所收获，下面我们一起来看看吧
|
这篇文章主要介绍了vue中的token怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue中的token怎么使用文章都会有所收获，下面我们一起来看看吧。 vue中token是在服务端产生的一串字符串，以作客户端进行请求的一个令牌；其使用方法如：1、封装操作localstorage本地存储的方法；2、在封装好storage后，将其挂载到全局组件中；3、在“request.js”里放入“token”；4、在router下的“index.vue”里设置路由守卫即可。 一.了解用法 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 } （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐
