经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
在vue中获取token,并将token写进header的方法
来源:jb51  时间:2018/9/27 16:26:13  对本文有异议

需要准备的东西:Vue+axios+Vuex+Vue-router

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.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中定义全局默认配置:

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

以上这篇在vue中获取token,并将token写进header的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号