网站系统开发怎么做,合肥全员核酸检测,园区网站建设,图文型官网站#x1f34a; 编程有易不绕弯#xff0c;成长之路不孤单#xff01; 目录
#x1f34a; 编程有易不绕弯#xff0c;成长之路不孤单#xff01;
一、今日目标
二、前端Vue模块的修改
2.1 the-header组件
2.2 store工具
2.3 router路由配置修改 一、今日目标 上篇文章… 编程有易不绕弯成长之路不孤单 目录 编程有易不绕弯成长之路不孤单
一、今日目标
二、前端Vue模块的修改
2.1 the-header组件
2.2 store工具
2.3 router路由配置修改 一、今日目标 上篇文章链接【wiki知识库】07.用户管理前端模块的添加-前端部分-CSDN博客 之前的一篇文章带大家实现了用户管理的功能网站内我们并未提供注册功能而是在一开始就初始化了一个管理员账号只有登录管理员的账号后才能对用户进行增删改查功能。这次我们要开发网站的登录功能。 下方的图片能够看到这是没有登录的情况导航栏中的菜单并没有展示一些操作功能。 当我们登录账号后就会展示对应的功能。 这个事情不难说的简单一些呢就是前端会从你的本地浏览器的存储空间中找出有没有一个可以证明你登陆过的token如果有这个token就会展示对应的功能选项否则的话就不会展示。这个token就是在我们登录之后返回给前端的并且由前端来将其保存到本地浏览器的一个存储空间当中。 二、前端Vue模块的修改 在之前我们修改过the-header组件今天我们还要修改为其添加上用户登录的一些代码。 2.1 the-header组件 这个代码我自己弄了半天因为这个布局总是展示错误就是a-menu标签后边 不能去加登录按钮需要在之前加。 templatea-layout-header classheaderdiv classlogo熊哈哈/divdiv a-popconfirmtitle确认退出登录?ok-text是cancel-text否confirmlogout()a classlogin-menu v-showuser.idspan退出登录/span/a/a-popconfirma classlogin-menu v-showuser.idspan您好{{user.name}}/span/aa classlogin-menu v-show!user.id clickshowLoginModalspan登录/span/a/diva-menuthemedarkmodehorizontal:style{ lineHeight: 64px }a-menu-item key/router-link to/首页/router-link/a-menu-itema-menu-item key/aboutrouter-link to/about关于我们/router-link/a-menu-itema-menu-item key/admin/user :styleuser.id? {} : {display:none}router-link to/admin/user用户管理/router-link/a-menu-itema-menu-item key/admin/ebook :styleuser.id? {} : {display:none}router-link to/admin/ebook电子书管理/router-link/a-menu-itema-menu-item key/admin/category :styleuser.id? {} : {display:none}router-link to/admin/category分类管理/router-link/a-menu-item/a-menua-modaltitle登录v-model:visibleloginModalVisible:confirm-loadingloginModalLoadingoklogina-form :modelloginUser :label-col{ span: 6 } :wrapper-col{ span: 18 }a-form-item label登录名a-input v-model:valueloginUser.loginName //a-form-itema-form-item label密码a-input v-model:valueloginUser.password typepassword //a-form-item/a-form/a-modal/a-layout-header
/template 然后就是script部分的代码。 script langtsimport { defineComponent, ref, computed } from vue;import axios from axios;import { message } from ant-design-vue;import store from /store;export default defineComponent({name: the-header,setup () {// 登录后保存const user computed(() store.state.user);// 用来登录const loginUser ref({loginName: ,password: });const loginModalVisible ref(false);const loginModalLoading ref(false);const showLoginModal () {loginModalVisible.value true;};// 登录const login () {console.log(开始登录);loginModalLoading.value true;axios.post(/user/login, loginUser.value).then((response) {loginModalLoading.value false;const data response.data;if (data.success) {loginModalVisible.value false;message.success(登录成功);store.commit(setUser, data.content);} else {message.error(data.message);}});};// 退出登录const logout () {console.log(退出登录开始);axios.get(/user/logout/ user.value.token).then((response) {const data response.data;if (data.success) {message.success(退出登录成功);store.commit(setUser, {});} else {message.error(data.message);}});};return {loginModalVisible,loginModalLoading,showLoginModal,loginUser,login,user,logout}}});
/script 最后是style部分的代码。 style scoped .logo {width: 120px;height: 31px;float: left;color: white;font-size: 18px;}.login-menu {float: right;color: white;padding-left: 10px;}
/style 2.2 store工具 在上方的代码中你会看到这句话。 import store from /store; store是vue中的状态管理模式用来存储和管理vue中的状态信息。说白了就是可以存储一些你需要的全局性质的信息。具体的内容还要大家自己去了解。我忘记了这段代码之前有没有提供了所以我索性在提供一次。 看一下下方的代码用到了一个变量SessionStorage这个变量用来将你登陆后的token保存在浏览器中。其中的state保存了user数据这个数据就是从SessionStorage中获取的或者是在你登陆后自动设置的。 import {createStore} from vuexdeclare let SessionStorage: any;
const USER USER;const store createStore({state: {user: SessionStorage.get(USER) || {}},mutations: {setUser(state, user) {console.log(store user, user);state.user user;SessionStorage.set(USER, user);}},actions: {},modules: {}
});export default store;再看看下方的代码。菜单标签的属性上加上了判断条件判断的就是当前的SessionStorage中是否有user被存储如果没有那么就不会展示菜单。 a-menuthemedarkmodehorizontal:style{ lineHeight: 64px }a-menu-item key/router-link to/首页/router-link/a-menu-itema-menu-item key/aboutrouter-link to/about关于我们/router-link/a-menu-itema-menu-item key/admin/user :styleuser.id? {} : {display:none}router-link to/admin/user用户管理/router-link/a-menu-itema-menu-item key/admin/ebook :styleuser.id? {} : {display:none}router-link to/admin/ebook电子书管理/router-link/a-menu-itema-menu-item key/admin/category :styleuser.id? {} : {display:none}router-link to/admin/category分类管理/router-link/a-menu-item/a-menu 2.3 router路由配置修改 有了上方的代码我们就能够在用户不登陆的状态下隐藏这些功能菜单但是这样只能隐藏菜单而不是彻底的屏蔽掉没有登陆的用户去访问这些组件。用户还是可以通过路由的路径访问到对应的组件。所以我们还要在路由配置中配置一些信息来防止这样的行为。 {path: /admin/user,name: AdminUser,component: AdminUser,meta: {loginRequire: true} 以用户管理为例我们要在这个用户管理的组件上加上一些信息。加上下边这个配置项后就意味着这个组件是需要登陆后访问的。这样我们就可以进行后续操作来组织用户在不登陆的状态下访问组件。注意所有需要登陆才能访问的组件都要加上这个配置信息。 接下来要配置的是路由拦截顾名思义在我们访问路由的时候进行拦截在拦截方法中判断组件是否需要登陆访问并且判断用户是否登录。如果组件需要登陆访问并且用户没有登陆的话就会跳到主页去。这样就防止了用户在不登陆的情况下通过路径访问路由了。 router.beforeEach((to, from, next) {// 要不要对meta.loginRequire属性做监控拦截if (to.matched.some(function (item) {console.log(item, 是否需要登录校验, item.meta.loginRequire);return item.meta.loginRequire})) {const loginUser store.state.user;if (Tool.isEmpty(loginUser)) {console.log(用户未登录);next(/);} else {next();}} else {next();}
}); 2.4 添加axios拦截 在我们每次向后端发送请求的时候需要携带上当前登录用户的token用于用户身份的校验这里先不多说。 这个拦截器会让你的axios请求每一次请求后端之前先做一些事情这里仅仅是携带上了用户的token其实还可以做很多的事情。 /*** axios拦截器*/
axios.interceptors.request.use(function (config) {console.log(请求参数, config);const token store.state.user.token;if (Tool.isNotEmpty(token)) {config.headers.token token;console.log(请求headers增加token:, token);}return config;
}, error {return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {console.log(返回结果, response);return response;
}, error {console.log(返回错误, error);const response error.response;const status response.status;if (status 401) {// 判断状态码是401 跳转到首页或登录页console.log(未登录跳到首页);store.commit(setUser, {});message.error(未登录或登录超时);router.push(/);}return Promise.reject(error);
});
