• 配置Mysql与注册登录模块(下）

    目录

    实现前端的页面授权功能

    实现注册访问后端API

    不输入密码也能注册的bug

    下一步登录状态持久化

    登录页面闪处理+右上角闪处理

    实现前端的页面授权功能

    当我们未登录的时候所有的页面都会重定向到我们的登录页面
    强行让用户登录一下，我们可以在router里面实现
    API意思，to跳转到哪个页面，from表示从哪个页面跳转过去
    next的表示将页面要不要执行下一步操作，写之前首先要记录每一个未授权界面
    把一些额外信息放到一个额外的域里面，meta信息里面存一下是否要授权
    如果需要授权而且没有登录，重定向到登录页面

    在 router 目录下的 index.js 文件下实现。 router -> index.js 

    1. import { createRouter, createWebHistory } from 'vue-router';
    2. import PkIndexView from '@/views/pk/PkIndexView';
    3. import RankListIndexView from '@/views/ranklist/RankListIndexView';
    4. import RecordIndexView from '@/views/record/RecordIndexView';
    5. import UserBotsIndexView from '@/views/user/userbots/UserBotsIndexView';
    6. import UserInfoIndexView from '@/views/user/userinfo/UserInfoIndexView';
    7. import MiNiChatView from '@/views/chat/MiNiChatView';
    8. import NotFound from '@/views/error/NotFound';
    9. import HomeIndexView from '@/views/home/HomeIndexView';
    10. import UserAccountLoginView from '@/views/user/UserAccountLoginView';
    11. import UserAccountRegisterView from '@/views/user/UserAccountRegisterView';
    12. import { from } from 'core-js/core/array';
    13. import store from '@/store';
    14.  
    15. // 把一些额外信息放到一个额外的域里面，meta信息里面存一下是否要授权，如果需要授权而且没有登录，重定向到登录页面，重定向到登录界面。
    16. const routes = [
    17.   
    18.     {
    19.       path: "/",
    20.       name: "home",
    21.       component: HomeIndexView,
    22.       meta:{
    23.         requestAuth: true,
    24.       }
    25.     },
    26.     {
    27.       path: "/pk/",
    28.       name: "pk_index",
    29.       component: PkIndexView,
    30.       meta:{
    31.         requestAuth: true,
    32.       }
    33.     },
    34.     {
    35.       path: "/record/",
    36.       name: "record_index",
    37.       component: RecordIndexView,
    38.       meta:{
    39.         requestAuth: true,
    40.       }
    41.     },
    42.     {
    43.       path: "/ranklist/",
    44.       name: "ranklist_index",
    45.       component: RankListIndexView,
    46.     },
    47.     {
    48.       path: "/user/bot/",
    49.       name: "user_bot_index",
    50.       component: UserBotsIndexView,
    51.       meta:{
    52.         requestAuth: true,
    53.       }
    54.     },
    55.     {
    56.       path: "/user/info/",
    57.       name: "user_info_index",
    58.       component: UserInfoIndexView,
    59.       meta:{
    60.         requestAuth: true,
    61.       }
    62.     },
    63.     {
    64.       path: "/user/login/",
    65.       name: "user_account_login",
    66.       component: UserAccountLoginView,
    67.       meta:{
    68.         requestAuth: false,
    69.       }
    70.     },
    71.     {
    72.       path: "/user/register/",
    73.       name: "user_account_register",
    74.       component: UserAccountRegisterView,
    75.       meta:{
    76.         requestAuth: false,
    77.       }
    78.     },
    79.     {
    80.       path: "/user/chat/",
    81.       name: "user_chat_index",
    82.       component: MiNiChatView,
    83.       meta:{
    84.         requestAuth: true,
    85.       }
    86.     },
    87.     {
    88.       path: "/404/",
    89.       name: "404",
    90.       component: NotFound,
    91.       meta:{
    92.         requestAuth: false,
    93.       }
    94.     },
    95.     {
    96.       path: "/:catchAll(.*)",
    97.       redirect: "/404/",
    98.     }
    99.   
    100. ]
    101. const router = createRouter({
    102.   history: createWebHistory(),
    103.   routes
    104. })
    105. // to跳转到哪个页面， from表示从哪个页面跳转过去
    106. // next的表示将页面要不要执行下一步操作，写之前首先要记录每一个未授权界面
    107. router.beforeEach((to,from,next) =>{
    108.   //如果要跳转的页面需要登录，但是没有登录，就强制到登录界面
    109.   if(to.meta.requestAuth && !store.state.user.is_login){
    110.     next({name:"user_account_login"});
    111.   }else{
    112.     next();
    113.   }
    114. });
    115.  
    116. export default router

    最终实现效果：如果处于未登录状态，点击 除注册之外的按钮 页面会跳转到 登录界面。

    实现注册访问后端API

    访问公开的链接不需要加表头，其他的都需要，实现注册页面直接把登录页面的样式复制过来再做修改

    如果是export的default就可以不加括号任意取名
    如果export的时候不加default就必须加上大括号
    提交的时候需要触发register函数,需要自己定义一下
    用let const都可以,当变量不会重新赋值用const可能会重新赋值用let
    我们可以把登录的api抄过来,如果是获取数据不用修改数据你就用get
    一般如果会修改数据库的话就用post,安全性post比get强

    在 view -> user -> account 下的 UserAccountRegisterView.vue 文件实现，实现方式类似于同目录下的 UserAccountLoginView.vue

    可以直接把登录页面的样式复制过来再做修改。

    2.   
    3.   
    4.   
    5.

    不输入密码也能注册的bug

    在测试的时候可能会遇到不输入密码也可以注册成功的 bug， 在 RegisterServiceImpl.java 下 修改一下就可以了。

    下一步登录状态持久化

    当我们的用户重定向到登陆页面的时候,我们可以事先判断一下他们有没有将token存在本地
    如果存在本地就把token取出来,验证一下是否过期
    如果没有过期，用户就不需要重新登陆了,可以直接跳转到首页
    刷新之后其实是一个未登录状态,自动先跳到我们的登录页面
    先从本地把我们的token取出来,发现token存在把token
    更新到我们的内存当中,然后再从云端请求下这个用户的信息
    如果可以请求的信息表示我们的token，是有效的，
    表示用户是登录的，我们就可以跳转到首页

    当我们的用户重定向到登陆页面的时候，我们需要把用户的 token 存储到浏览器的 local storage，这样就可以实现登录状态持久化。

    首先 修改 store 目录下的 -> user.js 文件，在合适的位置添加下列两行。

    1. localStorage.setItem("jwt_token", resp.token);
    2.  
    3. localStorage.removeItem("jwt_token");

    其次 修改 view -> user -> account 下的 UserAccountLoginView.vue 文件

    1. const jwt_token = localStorage.getItem("jwt_token");
    2.         if(jwt_token){
    3.             store.commit("updateToken",jwt_token);
    4.             store.dispatch("getinfo",{
    5.                 success(){
    6.                     router.push({name:"home"});
    7.                     store.commit("updatePullingInfo",false);
    8.                 },
    9.                 error(){
    10.                     store.commit("updatePullingInfo",false);
    11.                 }
    12.             })
    13.         }else{
    14.             store.commit("updatePullingInfo",false);
    15.         }

    优化前端
    在实现前端登录状态持久化之后，刷新页面可能会存在明显的转换，所以下面对前端页面进行优化。

    登录页面闪处理+右上角闪处理

    首先 在 store 目录下的 user.js 中添加全局变量和下拉函数。

    1. import $ from 'jquery'
    2.  
    3. export default{
    4.     state:{
    5.         id:"",
    6.         username:"",
    7.         password:"",
    8.         photo:"",
    9.         token:"",
    10.         is_login:false,
    11.         pulling_info:true,//是否正在拉取信息
    12.     },
    13.     getters:{
    14.  
    15.     },
    16.     mutations:{//修改state里面的值
    17.         updateUser(state,user){
    18.             state.id = user.id;
    19.             state.username = user.username;
    20.             state.photo = user.photo;
    21.             state.is_login = user.is_login;
    22.         },
    23.         updateToken(state,token){
    24.             state.token = token;
    25.         },
    26.         logout(state){
    27.             state.id = "",
    28.             state.username = "",
    29.             state.photo = "",
    30.             state.token = "",
    31.             state.is_login = false
    32.         },
    33.         updatePullingInfo(state,pulling_info){
    34.             state.pulling_info = pulling_info;
    35.         }
    36.     },
    37.     actions:{
    38.         //异步
    39.         login(context,data){
    40.             // 测试LoginService
    41.             $.ajax({
    42.                 url:"http://127.0.0.1:3000/user/account/token/",
    43.                 type:"post",
    44.                 data:{
    45.                 username:data.username,
    46.                 password:data.password,
    47.                 },
    48.                 success(resp){
    49.                     if(resp.error_message === "success"){
    50.                         localStorage.setItem("jwt_token", resp.token);
    51.                         //调用 mutations里面的函数用commit context上下文调用mutations里面的函数 修改state的内容
    52.                         context.commit("updateToken",resp.token);
    53.                         //调用data的成功函数
    54.                         data.success(resp);
    55.                     }
    56.                 },
    57.                 error(resp){
    58.                     data.error(resp);
    59.                 }
    60.             });
    61.         },
    62.         getinfo(context,data){
    63.             $.ajax({
    64.                 url:"http://127.0.0.1:3000/user/account/info/",
    65.                 type:"get",
    66.                 headers:{
    67.                     Authorization:"Bearer "+context.state.token,
    68.                 },
    69.                 success(resp){
    70.                     if(resp.error_message === "success"){
    71.                         context.commit("updateUser",{
    72.                             ...resp,
    73.                             is_login:true,
    74.                         });
    75.                         data.success(resp);
    76.                     }else{
    77.                         data.error(resp);
    78.                     }
    79.                 },
    80.                 error(resp){
    81.                     data.error(resp);
    82.                 }
    83.             });
    84.         },
    85.         logout(context){
    86.             localStorage.removeItem("jwt_token");
    87.             context.commit("logout");
    88.         }
    89.     },
    90.     modules:{
    91.  
    92.     },
    93. }

    其次 修改 UserAccountLoginView.vue

    最后还需要修改 NavBar.vue。

      1. class="navbar-nav" v-else-if="!store.state.user.pulling_info">
    2.             <li class="nav-item ">
    3.                     <router-link class="nav-link "  :to="{name:'user_account_login'}"   role="button" >
    4.                       Login
    5.                     router-link>
    6.             li>
    7.             <li class="nav-item ">
    8.                     <router-link class="nav-link "  :to="{name:'user_account_register'}" role="button" >
    9.                       Register
    10.                     router-link>
    11.             li>
    12.

完成～

  • 相关阅读:
    自学（网络安全）黑客——高效学习2024
    SSM SpringBoot vue学校办公自动化系统
    安徽省专业技术类职业资格与职称对应表
    HOOPS Commuicator：基于Web的交互式2D/3D图形轻量化引擎
    kafka集群配置
    【例题】逆波兰表达式求值(图解+代码)
    String 创建字符串对象和字符串常量池的联系推理
    最长公共子串LCS
    MySQL性能调优
    认识微服务
  • 原文地址：https://blog.csdn.net/weixin_49884716/article/details/127838660