您现在的位置是：网站首页> 编程资料编程资料

Vue注册模块与登录状态的持久化实现方法详解_vue.js_

2023-05-24 385人已围观

简介 Vue注册模块与登录状态的持久化实现方法详解_vue.js_

整体框架

1. 前端页面授权

当我们登录网站的时候，如果没有登录，强制让用户重定向到登录界面

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

import store from '../store/index' // 把一些额外信息放到一个额外的域里面，meta信息里面存一下是否要授权，如果需要授权而且没有登录，重定向到登录页面，重定向到登录界面。 const routes = [ { path: "/", name: "home", redirect: "/pk/", meta: { requestAuth: true, } }, { path: "/pk/", name: "pk_index", component: PkIndexView, meta: { requestAuth: true, } }, { path: "/record/", name: "record_index", component: RecordIndexView, meta: { requestAuth: true, } }, { path: "/ranklist/", name: "ranklist_index", component: RanklistIndexView, meta: { requestAuth: true, } }, { path: "/user/bot/", name: "user_bot_index", component: UserBotIndexView, meta: { requestAuth: true, } }, { path: "/user/account/login", name: "user_account_login", component: UserAccountLoginView, meta: { requestAuth: false, } }, { path: "/user/account/register", name: "user_account_register", component: UserAccountRegisterView, meta: { requestAuth: false, } }, { path: "/404/", name: "404", component: NotFound, meta: { requestAuth: false, } }, { path: "/:catchAll(.*)", redirect: "/404/", } ] // to跳转到哪个页面， from表示从哪个页面跳转过去 // next的表示将页面要不要执行下一步操作，写之前首先要记录每一个未授权界面 router.beforeEach((to, from, next) => { if (to.meta.requestAuth && !store.state.user.is_login) { next({name: "user_account_login"})； } else { next(); } })

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

2. 实现注册页面

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

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

实现效果图：

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

3. 实现登录状态的持久化

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

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

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

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

优化前端

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

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

state: { id: "", username: "", password: "", photo: "", token: "", is_login: false, pulling_info: true, //是否正在拉取信息 }, mutations: { updateUser(state, user) { state.id = user.id; state.username = user.username; state.photo = user.photo; state.is_login = user.is_login; }, updateToken(state, token) { state.token = token; }, logout(state) { state.id = ""; state.username = ""; state.photo = ""; state.token = ""; state.is_login = false; }, updatePullingInfo(state, pulling_info) { state.pulling_info = pulling_info; } },