注册登录模块（下）

工程课 SpringBoot4.3. 上课笔记

这节课做好三件事 （公平，公平，还**是公平）

1. 前端页面授权
2. 注册页面
3. 登录状态持久化

前端页面授权

router中添加router.beforeEach

//to跳转到哪个页面,from从哪个页面跳转过来，next页面要不要执行下一步操作
router.beforeEach((to,from,next)=>{

})

每个路由添加一个信息用来表示当前目录是否需要授权。这里y总采取的做法是开辟一个meta域存额外信息。

{
        path: "/pk/",
        name: "pk_index",
        component: PkIndexView,
        meta:{
            requestAuth:true//变量名任意取
        }
},

还需要判断是否在登录状态

需要引入store

import store from '../store/index'

完善刚才写的router.beforeEach

router.beforeEach((to, from, next) => {
    //需要授权且用户没有登录
  if (to.meta.requestAuth && !store.state.user.is_login) {
    next({name: "user_account_login"});
  } else {
    next();
  }
})

注册页面

这里和登录页面大同小异，在以下几处修改代码即可，详情见y总仓库代码

本节课y总代码仓库地址 kob · GitLab

//在以下目录修改

/web/src/views/user/account/UserAccountRegisterView.vue

//上节课遗留的忘记return map问题导致密码可以为空
/backend/src/main/java/com/kob/backend/service/impl/user/account/RegisterServiceImpl.java

//删除没用的调试信息（console,sout）
web/src/views/user/account/UserAccountLoginView.vue
/backend/src/main/java/com/kob/backend/controller/user/account/LoginController.java

ajax为什么不放在store中的user.js中？

因为只有需要修改state值时，才在user.js中操作。

注册界面无需修改任何值，所以直接在View里写。

登录状态持久化

刷新后登陆状态失效，原因是因为token是放在内存当中。内存一刷新就消失。我们需要将token存在用户的游览器中，这里即localStorage

代码见：web/src/store/user.js · / kob · GitLab

//  /store/user.js ajax中
localStorage.setItem("jwt_token", resp.token);
//  最后logout时删除一下token
localStorage.removeItem("jwt_token");

此时虽然已经存在了用户游览器中，但是这个token并不会被自动取出来。所以每次重定向到登录界面时，判断一下游览器中是否有token并且验证是否过期。

代码见：web/src/views/user/account/UserAccountLoginView.vue

const jwt_token = localStorage.getItem("jwt_token");
if (jwt_token) {
    store.commit("updateToken", jwt_token);
    store.dispatch("getinfo", {
        success() {
            router.push({ name: "home" });
        },
        error() {
        }
    })
} 

此时我们的登录状态持久化就已经完成了，但是刷新的时候login页面与导航栏登录注册会一闪而过（非常的闪眼与丑），我们需要开辟一个全局变量，让这些信息在用户登录后刷新不显示。

本节课y总代码仓库地址 kob · GitLab

//  store的user.js中创建全局变量
pulling_info:true,
//  store的user.js mutations中添加
updatePullingInfo(state, pulling_info) {
    state.pulling_info = pulling_info;
}

//  views/user/account/UserAccountLoginView.vue里借助v-if使用该变量
<ContentField v-if="!$store.state.user.pulling_info">
    。。。
    。。。
const jwt_token = localStorage.getItem("jwt_token");
if (jwt_token) {
    store.commit("updateToken", jwt_token);
    store.dispatch("getinfo", {
        success() {
            router.push({ name: "home" });
            store.commit("updatePullingInfo", false);
        },
        error() {
            store.commit("updatePullingInfo", false);
        }
    })
} else {
    store.commit("updatePullingInfo", false);
}

// /web/src/components/NavBar.vue中导航栏登录注册也使用该变量
 <ul class="navbar-nav" v-else-if="!$store.state.user.pulling_info">

Vue user.js中的actions与mutations区别？

用mutations里函数用store.commit

用actions里函数用store.dispatch

函数的修改是异步的，即从云端拉取信息之后才会执行。只能放在actions里。

而同步操作可以放在mutations