在vue中如何获取token，并将token写进header

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

 

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. })

 

 

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

 

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. })

 

3.在router/index.js中

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. })

 

 

 

 

 

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

 

Axios.defaults.headers.common['Authentication-Token'] = store.state.token;

 

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

 

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. });

 

------------------------------------------------------------------------------------

...................完成以上步骤就可以了..........................

------------------------------------------------------------------------------------