vue项目登录及token验证 vue-ant

深碍√TFBOYSˉ_ 2021-07-24 19:29 524阅读 0赞

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

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信息并跳转到登录页面

.
.
.
.
实操代码：

1.login页(账号密码登录完成后，将后台返回的token储存到本地)；最后附上了登录页完整代码

  1. handleSubmit(e) { 
  2.       var that = this;
  3.       this.userName = this.userName.trim();
  4.       this.password = this.password.trim();
  5.       if (this.userName === "" && this.password === "") { 
  6.         that.$message.warning("账号和密码无内容");
  7.         return;
  8.       }
  9.       if (this.userName === "") { 
  10.         that.$message.warning("账号无内容");
  11.         return;
  12.       }
  13.       if (this.password === "") { 
  14.         that.$message.warning("密码无内容");
  15.         return;
  16.       }
  18.       var username = document.getElementById("username").value;
  19.       var password = document.getElementById("password").value;
  22.        e.preventDefault();
  23.         this.form.validateFields((err, values) => { 
  24.           //这一步将用户名储存在vuex ||||||||||目前域账号和用户名都是写一样了||||||||||||||||||||||||||||||||||||||||||||||||
  25.           axios
  26.             .post(this.$store.state.windowCONTENT + "sysConfig/getUserRole", { 
  27.               loginUser: this.userName,
  28.             })
  29.             .then((res) => { 
  30.               if (res.data.success == 0) { 
  31.                 //有权限
  32.                 this.$store.state.loginUser = this.userName;
  33.                 this.$store.state.userName = this.userName;
  34.                 this.$store.state.roleCode = res.data.data.roleCode;
  35.                 //存入token
  36.                 localStorage.setItem("token",JSON.stringify(res.data.data.token));
  37.                 // console.log(res.data.data,this.$store.state.roleCode);
  38.                 if (!err) { 
  39.                   this.$router.push("/layout");
  40.                   this.$message.success("登陆成功");
  41.                 }
  42.               } else { 
  43.                 //无权限
  44.                 this.$message.error(res.data.data);
  45.               }
  46.             });
  47.         });
  50.     },

2.marn.js（配置请求拦截器，每次请求携带token，后端进行验证；配置响应拦截器，根据后端验证返回的结果，判断token是否过期）

  1. import "babel-polyfill";
  2. import Vue from "vue";
  3. import App from "./App.vue";
  4. import router from "./router";
  5. import store from "./store";
  6. import {  Button, message } from 'ant-design-vue';
  7. import Antd from "ant-design-vue";
  8. import "ant-design-vue/dist/antd.css";
  9. import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
  10. import moment from "moment";
  11. import "moment/locale/zh-cn";
  12. import "./assets/iconfont/iconfont";
  13. import axios from "axios";
  15. Vue.component(Button.name, Button);
  17. Vue.config.productionTip = false;
  19. Vue.use(Antd);
  20. Vue.prototype.$message = message;
  22. // 设置axios全局默认的BASE-URL， 只要设置了全局的默认base_url，以后的请求会自动拼接上base_url
  23. //axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'
  25. // 配置axios的请求拦截器-(每次在请求头上携带后台分配的token-后台判断token是否有效等问题)
  26. axios.interceptors.request.use(
  27.   function(config) { 
  28.     // 在发送请求之前做些什么
  29.     // console.log('请求到了哟', config.headers.Authorization)
  30.     // 统一的给config设置 token
  31.     config.headers.Authorization = JSON.parse(localStorage.getItem("token"));
  32.     config.headers['Token'] = JSON.parse(localStorage.getItem("token"));
  33.     return config;
  34.   },
  35.   function(error) { 
  36.     // 对请求错误做些什么
  37.     return Promise.reject(error);
  38.   }
  39. );
  41. //响应拦截器 与后端定义状态是100时候是错误 跳转到登录界面
  42. axios.interceptors.response.use(function (response) { 
  43.   // 对响应数据做点什么
  44.   console.log(response)
  45.     //当返回信息为未登录或者登录失效的时候重定向为登录页面
  46.   if (response.data.status == 100 || response.data.message == '用户未登录或登录超时，请登录！') { 
  47.     router.push({ 
  48.       path: "/login",
  49.       querry: {  redirect: router.currentRoute.fullPath }//从哪个页面跳转
  50.     })
  51.     message.warning(response.data.message);
  52.   }
  53.   return response;
  54. }, function (error) { 
  55.   // 对响应错误做点什么
  56.   return Promise.reject(error)
  57. })
  59. moment.locale("zh-cn");
  60. new Vue({ 
  61.   zh_CN,
  62.   router,
  63.   watch: { 
  64.     // 监听路由变化
  65.     "$route.path": function(newVal, oldVal) { 
  66.       console.log(`new_path = ${ newVal}, old_path = ${ oldVal}`);
  67.     },
  68.   },
  69.   store,
  70.   render: (h) => h(App),
  71. }).$mount("#app");

3.router.js（配置导航守卫，有token或者是去登录页就通过，否则定向到登录页）

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import Home from '../views/Home.vue'
  4. import Layout from '../components/Layout.vue'
  5. import Login from '../components/Login.vue'
  7. Vue.use(VueRouter)
  9.   const routes = [
  10.   { 
  11.     path: '/',
  12.     redirect: 'login'
  13.   },
  14.   { 
  15.     path: '/login',
  16.     name: 'Login',
  17.     component: Login
  18.   },
  19.   { 
  20.     path: '/layout',
  21.     name: 'Layout',
  22.     component: Layout
  23.   },
  24.   { 
  25.     path: '/about',
  26.     name: 'About',
  27.     // route level code-splitting
  28.     // this generates a separate chunk (about.[hash].js) for this route
  29.     // which is lazy-loaded when the route is visited.
  30.     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  31.   }
  32. ]
  34. const router = new VueRouter({ 
  35.   routes
  36. })
  38. // to 到哪去
  39. // from 从哪来
  40. // next 是否放行 next() 放行 next('/login') 拦截到登录
  41. // 如果准备去登录, 不需要拦截
  42. // 如果已经登录过了, 有token, 不需要拦截
  43. // 如果不是去登陆, 且没有 token, 拦截到登录页
  44. router.beforeEach((to, from, next) => { 
  45.   const token = JSON.parse(localStorage.getItem('token'));
  46.   console.log(token);
  47.   // console.log(to)
  48.   if (to.path === '/login' || token) { 
  49.     next()
  50.   } else { 
  51.     next('/login')
  52.   }
  53. })
  55. export default router

4.退出：清除本地储存的token

  1. //退出登录
  2.     signOut() { 
  3.       console.log("点击了退出", this.$route.query.sessionId);
  5.       localStorage.clear("token");
  6.       this.$route.push('/')
  7.       //将vuex的数据初始化和清除默认的数据
  8.     },

.
.
.
.
.
.

完整登录页

  1. <template>
  2.   <div class="login">
  3.     <div class="logo">
  4.       <img :src="logoUrl" alt />
  5.     </div>
  7.     <div class="welcome">WELCOME</div>
  8.     <div class="platform">欢迎来到XX平台</div>
  10.     <div class="box">
  11.       <a-form
  12.         id="components-form-demo-normal-login"
  13.         :form="form"
  14.         class="login-form"
  15.         @submit.prevent="handleSubmit"
  16.       >
  17.         <a-form-item>
  18.           <div class="l-bor">登录</div>
  19.         </a-form-item>
  20.         <a-form-item>
  21.           <div class="account">账号</div>
  22.         </a-form-item>
  23.         <a-form-item>
  24.           <a-input v-model="userName" allowClear class="user-name" placeholder="请输入">
  25.             <!-- v-decorator="[
  26.           'userName',
  27.           {  rules: [{  required: true, message: '请输入账号名!' }] },
  28.             ]"-->
  29.             <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
  30.           </a-input>
  31.         </a-form-item>
  32.         <a-form-item>
  33.           <div class="p-box">密码</div>
  34.         </a-form-item>
  35.         <a-form-item>
  36.           <!-- <a-input
  37.             v-decorator="[
  38.           'password',
  39.           {  rules: [{  required: true, message: 'Please input your Password!' }] },
  40.         ]"
  41.             type="password"
  42.             placeholder="Password"
  43.           >
  44.             <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
  45.           </a-input>-->
  46.           <a-input-password
  47.             v-model="password"
  48.             allowClear
  49.             class="password"
  50.             type="password"
  51.             placeholder="请输入"
  52.           >
  53.             <!-- v-decorator="[
  54.               'password',
  55.               {  rules: [{  required: true, message: '请输入密码!' }] },
  56.             ]"-->
  57.             <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
  58.           </a-input-password>
  59.         </a-form-item>
  60.         <a-form-item>
  61.           <!-- <a-checkbox
  62.             v-decorator="[
  63.           'remember',
  64.           { 
  65.             valuePropName: 'checked',
  66.             initialValue: true,
  67.           },
  68.         ]"
  69.           >Remember me</a-checkbox>-->
  70.           <!-- <a class="login-form-forgot" href>Forgot password</a> -->
  71.           <a-button
  72.             :style="{opacity: (btnFlag ? .5 : 1)}"
  73.             type="primary"
  74.             html-type="submit"
  75.             class="login-form-button"
  76.           >
  77.             <span
  78.               style="width:58px;
  79.             height:24px;
  80.             font-size:17px;
  81.             font-family:PingFang-SC-Light,PingFang-SC;
  82.             font-weight:300;
  83.             color:rgba(255,255,255,1);
  84.             line-height:24px;
  85.             text-shadow:0px 2px 3px rgba(62,32,201,0.1);"
  86.             >登录</span>
  87.           </a-button>
  88.           <!-- Or -->
  89.           <!-- <a href>register now!</a> -->
  90.         </a-form-item>
  91.       </a-form>
  92.     </div>
  93.     <div class="bottom"></div>
  94.   </div>
  95. </template>
  97. <script>
  98. import axios from "axios";
  99. export default { 
  100.   data() { 
  101.     return { 
  102.       logoUrl: require("../assets/logo.svg"),
  103.       userName: "",
  104.       password: "",
  105.       btnFlag: true,
  106.       flagColor: { 
  107.         opacity: 0.5,
  108.       },
  109.     };
  110.   },
  111.   beforeCreate() { 
  112.     this.form = this.$form.createForm(this, {  name: "normal_login" });
  113.   },
  114.   created() { 
  115.   },
  116.   methods: { 
  117.     handleSubmit(e) { 
  118.       var that = this;
  119.       this.userName = this.userName.trim();
  120.       this.password = this.password.trim();
  121.       if (this.userName === "" && this.password === "") { 
  122.         that.$message.warning("账号和密码无内容");
  123.         return;
  124.       }
  125.       if (this.userName === "") { 
  126.         that.$message.warning("账号无内容");
  127.         return;
  128.       }
  129.       if (this.password === "") { 
  130.         that.$message.warning("密码无内容");
  131.         return;
  132.       }
  134.       // jucenter.submit({name:this.userName,pwd:this.password});
  135.       e.preventDefault();
  136.       this.form.validateFields((err, values) => { 
  137.         //这一步将用户名储存在vuex ||||||||||目前域账号和用户名都是写一样了||||||||||||||||||||||||||||||||||||||||||||||||
  138.         console.log(this.userName, this.password);
  139.         axios.post(
  140.           this.$store.state.windowCONTENT + "sysConfig/getUserRole",
  141.           { loginUser: this.userName}
  142.         ).then(res => { 
  143.           if (res.data.success == 0) { //有权限
  144.             this.$store.state.loginUser = this.loginUser;
  145.             this.$store.state.userName = res.data.data.userName;
  146.             this.$store.state.roleCode = res.data.data.roleCode;
  147.             //存入token
  148.             localStorage.setItem("token",JSON.stringify(res.data.data.token));
  149.             if (!err) { 
  150.               this.$router.push("/layout");
  151.               console.log(111);
  152.               this.$message.success('登陆成功')
  153.             }
  154.           } else { //无权限
  155.             this.$message.error(res.data.data)
  156.           }
  157.         })
  158.       });
  159.     },
  160.   },
  161.   watch: { 
  162.     userName: function (v1, v2) { 
  163.       var that = this;
  164.       if (v1 && this.password) { 
  165.         this.btnFlag = false;
  166.         console.log(this.btnFlag);
  167.       } else { 
  168.         this.btnFlag = true;
  169.         console.log(this.btnFlag);
  170.       }
  171.     },
  172.     password: function (v1, v2) { 
  173.       var that = this;
  174.       if (v1 && this.userName) { 
  175.         this.btnFlag = false;
  176.         console.log(this.btnFlag);
  177.       } else { 
  178.         this.btnFlag = true;
  179.         console.log(this.btnFlag);
  180.       }
  181.     },
  182.   },
  183. };
  184. </script>
  185. <style   lang="less">
  186. .login { 
  187.   position: relative;
  188.   text-align: left;
  189.   height: 100%;
  190.   background: linear-gradient(
  191.     154deg,
  192.     rgba(119, 182, 244, 1) 0%,
  193.     rgba(66, 106, 229, 1) 100%
  194.   );
  195.   // background-color: pink!important;
  196.   // overflow: hidden;
  198.   .logo { 
  199.     position: absolute;
  200.     top: 21px;
  201.     left: 35px;
  202.   }
  204.   .welcome { 
  205.     position: absolute;
  206.     bottom: 60%;
  207.     left: 10%;
  208.     width: 416px;
  209.     height: 100px;
  210.     font-size: 72px;
  211.     font-family: PingFang-SC-Regular, PingFang-SC;
  212.     font-weight: 400;
  213.     color: rgba(255, 255, 255, 1);
  214.     line-height: 100px;
  215.     letter-spacing: 6px;
  216.   }
  218.   .platform { 
  219.     position: absolute;
  220.     bottom: 53%;
  221.     left: 10%;
  222.     width: 313px;
  223.     height: 33px;
  224.     font-size: 24px;
  225.     font-family: PingFang-SC-Light, PingFang-SC;
  226.     font-weight: 300;
  227.     color: rgba(255, 255, 255, 1);
  228.     line-height: 33px;
  229.     letter-spacing: 2px;
  230.   }
  232.   .box { 
  233.     position: absolute;
  234.     bottom: 10%;
  235.     right: 0;
  236.     // margin: 0 auto;
  237.     // margin-bottom: 151px; //定位高度-----↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  238.     margin-right: 21%;
  239.     width: 370px;
  240.     height: 500px;
  241.     border-radius: 10px;
  242.     background: rgba(252, 251, 255, 1);
  243.     padding: 0px 53px;
  245.     //去除默认下边距
  246.     .ant-form-item { 
  247.       margin-bottom: 0;
  248.     }
  249.     //输入框
  250.     .ant-input-affix-wrapper .ant-input:not(:last-child) { 
  251.       height: 36px;
  252.       font-size: 14px;
  253.       font-family: PingFang-SC-Regular, PingFang-SC;
  254.       font-weight: 400;
  255.       color: rgba(53, 58, 64, 1);
  256.       // background-color: pink;
  257.     }
  258.     //登录按钮
  259.     #components-form-demo-normal-login .login-form-button { 
  260.       width: 264px;
  261.       height: 44px;
  262.       background: linear-gradient(
  263.         90deg,
  264.         rgba(60, 163, 247, 1) 0%,
  265.         rgba(28, 106, 235, 1) 100%
  266.       );
  267.       box-shadow: 0px 2px 3px 0px rgba(62, 32, 201, 0.1);
  268.       border-radius: 6px;
  269.     }
  271.     .l-bor { 
  272.       margin-left: -53px;
  273.       margin-top: 50px;
  274.       line-height: 25px;
  275.       border-left: 6px solid rgba(28, 106, 235, 1);
  276.       padding-left: 47px;
  277.       font-size: 18px;
  278.       font-family: PingFang-SC-Medium, PingFang-SC;
  279.       font-weight: 500;
  280.       color: rgba(53, 58, 64, 1);
  281.       letter-spacing: 1px;
  282.     }
  283.     // .account{ 
  284.     // margin-top: 58px;
  285.     // width:27px;
  286.     // height:17px;
  287.     // font-size:12px;
  288.     // font-family:PingFang-SC-Light,PingFang-SC;
  289.     // font-weight:300;
  290.     // color:rgba(53,58,64,1);
  291.     // line-height:17px;
  292.     // letter-spacing:1px;
  293.     // }
  294.     .ant-form-item:nth-child(2) { 
  295.       position: absolute;
  296.       top: 133px;
  297.       .account { 
  298.         width: 27px;
  299.         height: 17px;
  300.         font-size: 12px;
  301.         font-family: PingFang-SC-Light, PingFang-SC;
  302.         font-weight: 300;
  303.         color: rgba(53, 58, 64, 1);
  304.         line-height: 17px;
  305.         letter-spacing: 1px;
  306.       }
  307.     }
  308.     .ant-form-item:nth-child(3) { 
  309.       position: absolute;
  310.       top: 160px;
  311.       width: 264px;
  312.     }
  313.     .ant-form-item:nth-child(4) { 
  314.       position: absolute;
  315.       top: 230px;
  316.       width: 264px;
  317.       .p-box { 
  318.         width: 27px;
  319.         height: 17px;
  320.         font-size: 12px;
  321.         font-family: PingFang-SC-Light, PingFang-SC;
  322.         font-weight: 300;
  323.         color: rgba(53, 58, 64, 1);
  324.         line-height: 17px;
  325.         letter-spacing: 1px;
  326.       }
  327.     }
  328.     .ant-form-item:nth-child(5) { 
  329.       position: absolute;
  330.       top: 257px;
  331.       width: 264px;
  332.     }
  333.     .ant-form-item:nth-child(6) { 
  334.       position: absolute;
  335.       top: 376px;
  336.       width: 264px;
  337.     }
  338.   }
  339.   .bottom { 
  340.     position: absolute;
  341.     bottom: 0;
  342.     width: 100%;
  343.     // height: 151px; //固定高度-----↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  344.     height: 10%; //固定高度-----↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  345.     background: linear-gradient(
  346.       360deg,
  347.       rgba(75, 118, 232, 0) 0%,
  348.       rgba(57, 98, 224, 0.41) 100%
  349.     );
  350.   }
  351. }
  352. #components-form-demo-normal-login .login-form { 
  353.   max-width: 300px;
  354. }
  355. #components-form-demo-normal-login .login-form-forgot { 
  356.   float: right;
  357. }
  358. #components-form-demo-normal-login .login-form-button { 
  359.   width: 100%;
  360. }
  361. </style>

发表评论

表情：
评论列表 （有 0 条评论，524人围观）

还没有评论，来说两句吧...

相关阅读

    相关 用户登录之token验证

    1.场景还原      可能还有很多小伙伴对token概念朦朦胧胧，今天笔者以项目中的用户登录的token验证需求跟大家讲讲其中的来龙去脉，希望能够理清大伙的思路。

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 458 阅读