详解vue项目中使用token的身份验证的简单实践
工作原理
- 前端页面进行登录操作,将用户名与密码发给服务器;
- 服务器进行效验,通过后生成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中的拦截器,通过配置httpresponseinteceptor,当后端接口返回401(未授权),让用户重新执行登录操作。
//httprequest拦截器
axios.interceptors.request.use(
config=>{
if(store.state.token){//判断是否存在token，如果存在的话，则每个httpheader都加上token
config.headers.Authorization=`token${store.state.token}`;
}
returnconfig;
},
err=>{
returnPromise.reject(err);
});
//httpresponse拦截器
axios.interceptors.response.use(
response=>{
returnresponse;
},
error=>{
if(error.response){
switch(error.response.status){
case401:
//返回401清除token信息并跳转到登录页面
store.commit(types.LOGOUT);
router.replace({
path:'login',
query:{redirect:router.currentRoute.fullPath}
})
}
}
returnPromise.reject(error.response.data)//返回接口返回的错误信息
});
4、将token存储在本地中
可以使用cookies/local/sessionStograge
三者的区别:
- sessionStorage不能跨页面共享的，关闭窗口即被清除，
- localStorage可以同域共享，并且是持久化存储的
- 在local/sessionstorage的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也是储存在本地的sessionstorage或者是客户端的cookies中，也是会受到XSS攻击。所以在使用tokens的时候，必须要考虑过期机制，不然攻击者就可以永久持有受害用户帐号。
相关文章:XSS和CSRF简述及预防措施
//login.vue
methods:{
login(){
if(this.token){
//存储在本地的localStograge中
this.$store.commit(types.LOGIN,this.token)
//跳转至其他页面
letredirect=decodeURIComponent(this.$route.query.redirect||'/');
this.$router.push({
path:redirect
})
}
}
}
在vuex中:
importVuexfrom'vuex';
importVuefrom'vue';
import*astypesfrom'./types'
Vue.use(Vuex);
exportdefaultnewVuex.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中:
exportconstLOGIN='login'; exportconstLOGOUT='logout';
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。