1:从接口处拿到token
以此接口为例子
this.$http.post("/api/account/login/", {
account: this.moblie,
password: this.password,
captcha_image: this.icodenum
})
.then(res => {
consol.log(res.data.data.token)
this.$store.commit("LOGIN", res.data.data.token);
}).catch(function(err) {
console.log(err);
});
2:创建store.js
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
state: {
token: window.sessionStorage.getItem('token'), //存到localStorage中一样
},
mutations: {
LOGIN: (state, data) => {
//更改token的值
state.token = data;
// console.log(data)
window.sessionStorage.setItem('token', data);
},
}
})
3:在api的http.js中
import axios from 'axios'
import {Toast} from 'vant';
import store from '../store/store.js' 引用store.js
// let AUTH_TOKEN = (function() {
// return sessionStorage.getItem("token");
// })();
// 创建 axios 实例
export const Axios = axios.create({
baseURL: 'https://ont-api.gotodns.win/', //接口名称
timeout: 5000, //请求接口的时间
})
// 添加请求拦截器
Axios.interceptors.request.use(function(config) {
// console.log(config)
// 在发送请求之前做些什么 设置token 判断有没有token
if (store.state.token) {
// console.log(store.state.token)
config.headers.token = `${store.state.token}`;
// config['headers']['Authorization'] = AUTH_TOKEN
}
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器 就是对数据做些什么
Axios.interceptors.response.use(function(response) {
// console.log(response.data.code)
// 对响应数据做点什么
return response;
}, function(error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 在传递给 then/catch 前,允许修改响应数据 这里是 判断code的值 来进行操作
Axios.defaults.transformResponse = [function(data) {
try {
var res = $.parseJSON(data);
// console.log(res.code)
if (res.code == -1000) {
sessionStorage.clear();
window.location.href = "/"
}
return res;
} catch (e) {
// return {
// result: null,
// error: {
// code: -1,
// msg: "network error",
// }
// };
}
}];
// 将 Axios 实例添加到Vue的原型对象上
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$http', {
value: Axios
})
}
}
4:或者通过接口直接设置token
signIn() {
this.$http.post({
method: 'post',
url: '/api/checkin',
//重要部分
headers: {
'token': sessionStorage.getItem("token")
},
}).then(res => {
if(res.data.code<0){
this.$toast(res.data.message);
}else{
this.signInpic = true
}
}).catch(function(err) {
})
},
```
# 2:路由守卫
1:在router的配置路由中
```js
// 不需要登录的加 meta: { requiresGuest: true},
{
path: '/',
name: 'login',
component: login,
meta: {
requiresGuest: true
},
},
// 需要登录的加 meta: { requireAuth: true},
{
path: '/home',
name: 'home',
component: home,
meta: {
requireAuth: true
},
},
```
在mian.js文件中:根据判断 requiresGuest还有requireAuth来进行展示某个值;
```js
router.beforeEach((to, from, next) => {
var token = sessionStorage.getItem('token');
// 判断路由组件中的某个属性
if (to.meta.requiresAuth === true) {
if (token) {
return next();
} else {
return next({name: 'login'});
}
}
if (to.meta.requiresGuest === true) {
if (token) {
return next({name: 'business'});
} else {
return next();
}
}
next();
});
```
[参考文档](http://www.yyyweb.com/5135.html)