Vue项目中实现用户登录及token验证,将token写进header
1.在login.vue中通过发送http请求获取token//根据api接口获取tokenvar url = this.HOST + "/session";this.$axios.post(url, {username: this.loginForm.username,password: this.loginForm.pass}).then(res => {// consol...
在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下(苹果微信内置浏览器在跨域请求的时候,cookie会被清除,安卓的不会。):
可参考https://segmentfault.com/q/1010000010928700
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信息并跳转到登录页面
可参考:https://www.cnblogs.com/web-record/p/9876916.html
1.在login.vue中通过发送http请求获取token
//根据api接口获取token
var url = this.HOST + "/session";
this.$axios.post(url, {
username: this.loginForm.username,
password: this.loginForm.pass
}).then(res => {
// console.log(res.data);
this.$message.success('登录成功');
let data = res.data;
//根据store中set_token方法将token保存至localStorage/sessionStorage中,
//data["Authentication-Token"],获取token的value值
this.$store.commit('set_token', data["Authentication-Token"]);
if (store.state.token) {
this.$router.push('/')
console.log(store.state.token)
} else {
this.$router.replace('/login');
}
}).catch(error => {
// this.$message.error(error.status)
this.loading = false
this.loginBtn = "登录"
this.$message.error('账号或密码错误');
// console.log(error)
})
2.在store.js中对token状态进行监管
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
token:''
},
mutations:{
set_token(state, token) {
state.token = token
sessionStorage.token = token
},
del_token(state) {
state.token = ''
sessionStorage.removeItem('token')
}
}
})
3.在router/index.js中
// 页面刷新时,重新赋值token
if (sessionStorage.getItem('token')) {
store.commit('set_token', sessionStorage.getItem('token'))
}
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token === 'null' || token === '') {
next('/login');
} else {
next();
}
}
});
4.在main.js中定义全局默认配置:
Axios.defaults.headers.common['Authentication-Token'] = store.state.token;
5.在src/main.js添加拦截器
// 添加请求拦截器
Axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
//判断是否存在token,如果存在将每个页面header都添加token
if(store.state.token){
config.headers.common['Authentication-Token']=store.state.token
}
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});
// http response 拦截器
Axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
this.$store.commit('del_token');
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面
})
}
}
return Promise.reject(error.response.data)
});
更多推荐
所有评论(0)