1.在login.vue中通过发送http请求获取token

2.在store.js中对token状态进行监管

3.在router/index.js中

4.在main.js中定义全局默认配置：

5.在src/main.js添加拦截器

[javascript]  view plain  copy

1. //根据api接口获取token  
2. var url = this.HOST + "/session";  
3. this.$axios.post(url, {  
4. username: this.loginForm.username,  
5. password: this.loginForm.pass  
6. }).then(res => {  
7. // console.log(res.data);  
8. this.$message.success('登录成功');  
9. let data = res.data;  
10. //根据store中set_token方法将token保存至localStorage/sessionStorage中，data["Authentication-Token"]，获取token的value值  
11. this.$store.commit('set_token', data["Authentication-Token"]);  
12.   
13. if (store.state.token) {  
14. this.$router.push('/')  
15. console.log(store.state.token)  
16. } else {  
17. this.$router.replace('/login');  
18. }  
19.   
20. }).catch(error => {  
21. // this.$message.error(error.status)  
22. this.loading = false  
23. this.loginBtn = "登录"  
24. this.$message.error('账号或密码错误');  
25. // console.log(error)  
26.   
27. })  

[javascript]  view plain  copy

1. import Vue from 'vue'  
2. import Vuex from 'vuex'  
3.   
4.   
5. Vue.use(Vuex)  
6.   
7. export default new Vuex.Store({  
8. state:{  
9. token:''  
10. },  
11. mutations:{  
12. set_token(state, token) {  
13. state.token = token  
14. sessionStorage.token = token  
15. },  
16. del_token(state) {  
17. state.token = ''  
18. sessionStorage.removeItem('token')  
19. }  
20. }  
21. })  

[javascript]  view plain  copy

1. // 页面刷新时，重新赋值token  
2. if (sessionStorage.getItem('token')) {  
3. store.commit('set_token', sessionStorage.getItem('token'))  
4. }  
5.   
6. const router = new Router({  
7. mode: "history",  
8. routes  
9. });  
10.   
11. router.beforeEach((to, from, next) => {  
12. if (to.matched.some(r => r.meta.requireAuth)) {           //这里的requireAuth为路由中定义的 meta:{requireAuth:true}，意思为：该路由添加该字段，表示进入该路由需要登陆的  
13. if (store.state.token) {  
14. next();  
15. }  
16. else {  
17. next({  
18. path: '/login',  
19. query: {redirect: to.fullPath}  
20. })  
21. }  
22. }  
23. else {  
24. next();  
25. }  
26. })  

[javascript]  view plain  copy

1. // 添加请求拦截器  
2. Axios.interceptors.request.use(config => {  
3. // 在发送请求之前做些什么  
4. //判断是否存在token，如果存在将每个页面header都添加token  
5. if(store.state.token){  
6. config.headers.common['Authentication-Token']=store.state.token  
7. }  
8.   
9. return config;  
10. }, error => {  
11. // 对请求错误做些什么  
12. return Promise.reject(error);  
13. });  
14.   
15. // http response 拦截器  
16. Axios.interceptors.response.use(  
17. response => {  
18.   
19. return response;  
20. },  
21. error => {  
22.   
23. if (error.response) {  
24. switch (error.response.status) {  
25. case 401:  
26. this.$store.commit('del_token');  
27. router.replace({  
28. path: '/login',  
29. query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面  
30. })  
31. }  
32. }  
33. return Promise.reject(error.response.data)  
34. });