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;
1
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
}
转载、文章来源：https://blog.csdn.net/weixin_46166949/article/details/105856745