登录管理(权限管理) token

login登录模块（每个成员只能看加自己的模块）

<template><div class="login-form"><el-formstatus-iconref="ruleForm"label-width="100px"class="demo-ruleForm"><el-form-item label="账号"><el-input v-model="username"></el-input></el-form-item><el-form-item label="密码"><el-input type="password" v-model="pwd" autocomplete="off"></el-input></el-form-item><el-form-item style="margin-left: 25%"><el-button type="primary" @click="login()">登录</el-button><!-- <el-button @click="resetForm('ruleForm')">重置</el-button> --></el-form-item></el-form></div>
</template><script>
export default {data() {return {username: "",pwd: "",};},methods: {login() {let rel = this.username && this.pwd;if (rel) {this.$http({path: "/admin/login",method: "post",params: {username: this.username,pwd: this.pwd,},}).then((res) => {// console.log(res);if (res.code == 200) {localStorage.token = res.token;this.$store.commit("loginUser", {//保存到vuex里面powers: res.powers.power,user: res.user,});this.$router.push({path: "/",});} else {this.$message({message: "用户名或密码错误",type: "warning",});}});} else {this.$message({message: "请完善登录信息",type: "warning",});}},},
};
</script><style scoped>
.login-form {width: 100%;height: 100%;background-image: url(https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/9345d688d43f8794667671a6d01b0ef41ad53aa8.jpg);z-index: -1; /*-1 可以当背景*/filter: blur(0.2px);
}
.el-form {padding: 40px 40px 30px 0px;width: 400px;height: 150px;background: hsla(0, 0%, 100%, 0.3);backdrop-filter: blur(7px);border-radius: 20px;z-index: 100;position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}
</style>

存储在store

import Vue from 'vue'
import Vuex from 'vuex'
import persistedstate from 'vuex-persistedstate'Vue.use(Vuex)export default new Vuex.Store({state: {user: {}, //当前用户powers: [] //当前用户的权限},mutations: {loginUser(state,params){ //保存用户的登录信息  参数一是state对象  参数二是外界传的参数state.powers = params.powersstate.user = params.user}},actions: {},modules: {},plugins: [persistedstate()]
})

登录管理(权限管理) token相关推荐

单点登录与权限管理本质：cookie安全问题
继续介绍「单点登录与权限管理」系列的第一部分:单点登录与权限管理本质,前一篇文章介绍了单点登录概念,以CAS协议的基本流程为例讲解了系统间的交互过程,过程中,cookie的设置和传输涉及的比较多,如何 ...
springBoot整合spring security+JWT实现单点登录与权限管理前后端分离
在前一篇文章当中,我们介绍了springBoot整合spring security单体应用版,在这篇文章当中,我将介绍springBoot整合spring secury+JWT实现单点登录与权限管理. ...
springBoot整合spring security+JWT实现单点登录与权限管理前后端分离--筑基中期
写在前面在前一篇文章当中,我们介绍了springBoot整合spring security单体应用版,在这篇文章当中,我将介绍springBoot整合spring secury+JWT实现单点登录与 ...
单点登录与权限管理本质：session和cookie介绍
本篇开始写「单点登录与权限管理」系列的第一部分:单点登录与权限管理本质,这部分主要介绍相关的知识概念.抽象的处理过程.常见的实现框架.通过这部分的介绍,能够对单点登录与权限管理有整体上的了解,对其相关 ...
「单点登录与权限管理」系列概述
首先,感谢几位朋友在朋友圈转发我的文章,小声的告诉你们,是我主动让他们帮忙转发的:)在朋友们的分享下,凌晨推送的一篇文章,阅读人数达到了280多,很满足,我会坚持写下去,分享工作.学习.生活中的所思所 ...
4a安全管控 java cas_单点登录与权限管理本质：单点登录介绍
继续介绍「单点登录与权限管理」系列的第一部分:单点登录与权限管理本质,前两篇介绍了session与cookie 和 HTTP重定向 ,有了他们,浏览器就可以在多个系统间自动交互,实现自动登录. 本篇介 ...
单点登录与权限管理本质：权限管理介绍
前面几篇文章介绍了单点登录的本质,包括cookie.session.重定向的基本概念,单点登录的基本交互流程,cookie的重要性和安全问题.单点登录能够确保:必须通过身份验证后,才能访问网站,且访问 ...
单点登录与权限管理本质：单点登录介绍
继续介绍「单点登录与权限管理」系列的第一部分:单点登录与权限管理本质,前两篇介绍了session与cookie 和 HTTP重定向 ,有了他们,浏览器就可以在多个系统间自动交互,实现自动登录. 该系列 ...
linux根-文件系统-目录管理-文件管理-用户及权限详解-用户组-用户管理-权限管理...
一 .Linux文件结构文件结构是文件存放在磁盘等存贮设备上的组织方法.主要体现在对文件和目录的组织上. 目录提供了管理文件的一个方便而有效的途径. Linux使用标准的目录结构,在安装的时候,安装 ...
Axure高保真学校后台管理作品管理教师管理资源审核学生管理家长管理权限管理资源管理web端后台模板管理教师审核统计分析教育后台管理系统学校后台管理系统校园后台管理系统
作品介绍:Axure高保真学校后台管理&作品管理&教师管理&资源审核&学生管理&家长管理&权限管理&资源管理&web端后台模板管理&am ...

登录管理(权限管理) token

login登录模块（每个成员只能看加自己的模块）

存储在store

登录管理(权限管理) token相关推荐

最新文章

热门文章