Vue前端实现用户登录功能？
Vue项目中的用户登录和token认证及流程图在前后端完全分离的情况下，Vue项目中实现token认证的大致思路如下：
一个简单的例子：
①登录接口调用成功，回调函数中将token存储到localS中。
在torage和vuex中（在login.vue中）
②store文件夹中的index.js
③路由控制器（router文件夹中的index.js）
④添加token到请求头
⑤如果前端状态码为401时，清除token信息并跳转到登录页面
流程图：
VUE项目注册及 实施模板
？ divclass="login-section"
el-form
?label-position="top"label-width="100px"class="demo-ruleForm"
?:rules="rules"
?:mod el="rulesForm"
状态图标
?ref="ruleForm"
?el-form-itemlabel="名称 用户"prop="name"
el-inputtype="text"v-model="rulesForm.name"/el-input
?/ el-form-item
?el-form-itemla bel="password"prop="password"
el-inputtype="password"?v -model="rulesForm.password"/el-input
？ /el-form-item
?el-form-item
el-buttontype="primary"@click="submitForm('ruleForm' )"提交/el-button
el-button 重置/el-button
?/el-form-item
? ?/el-form
? div
/template
脚本
import{register}from'@/service/api';
exportdefault{
>?data(){
返回{
?规则形式：{
name:'',
?密码：''
?}，
?rule:{
name:[
{required:true, message:'请输入您的名字',trigger:"blurred"},
?{min:1,max:5,message:"长度3-5",trigger:"模糊"}
],
密码:[
{required:true,message:'请输入密码',trigger:"unclear"},
{min: 3 , max:5,message:"长度3-5",tr igger:"模糊"}
?]
?}
};
?}, < /p>
?方法：{
submitForm(formName){
? this.$refs[formName].validate((valid)={
if(valid){
// 如果身份验证已通过，将用户名和密码发送到后面
register({
?name: this. rulesForm.name,
?password:this.rulesForm.password,
}).then((数据)={
console.log(数据)
if(数据. code===0){
localStorage.setItem('token',data.data.token);
window.location.href='/';
}
if(da ta.code===1){
this.$message.error(data.mes)
? ?}
});
}其他{
控制台日志。
("错误提交！！");
returnfalse;
}
?}) ;
}
?}
}
/script
stylelang="stylus"
.login 部分
?padding0px20px
/style
templ eat
?divclass="login-section"
el-form
label-position="top"
?label-width="100px"cl ass="demo-ruleForm"
?:rules="rules"
?:model="rulesForm"
状态图标
?ref="rul eForm"
?el-form-itemlabel="username"prop="名称"
?el-inputtype = "text"v-model="rulesForm.name "/el-input
?/el-form-item
?el-form-itemlabel="password"prop="password"
el-inputtype="password d"v-model="rulesForm.password"/el-input
?/el-form-item
?el-form-item
el-buttontype="primary"@click="submitForm('ruleForm')"提交/el-button
el-buttonReset/el-button
?/el -form -item
? ?/el-form
?/div
/template
脚本
从'@/service/api导入{login} ';
exportdefault{
?data(){
return{
?//存储数据的对象
?rulesForm: {
名称:'',
密码:''
?},
?规则：{
?名称：[
{required:true,message:'请输入您的姓名',trigger:"blurred"},
? {min:1,max:5,message:"length 3-5",trigger:"blurred"}
],
password:[
{required:true,messwise:'请输入密码',trigger:"blurred"},
?{ min: 3,max:5,message:"长度3-5",trigger:"模糊" }
?]
?}
};
?},
？方法：{
？submitForm(formName){
？ this.$refs[formName].validate((valid)={
if(valid){
// 如果校准通过，将用户名和密码发送回此处
login({
name:this.rulesForm .name,
login({
name:this.rulesForm .name,
说 路径:this.rulesForm.password,
?}).then((data)={
?console. log(数据)
if(data.code===0){
?localStorage.setItem('token',data .data .token);
?window.location.href ='/';
?}
?if(data.code===1){
this.$message.error(data.mes)
?}
? });
}其他{
console.log("错误提交！");
returnfalse;
}
?});
}
?}
}
/script
stylelang =“手写笔”
。
登录部分
?padding0px20px
/style
importVuefrom'vue'
importRouterfrom'vue-router'
Vue.use(路由器)
importStorefrom'@/stor e'
从'@/service/api.js'导入{userInfo}
importLoginfrom'@/views/user-login/index.vue'
constrouter=newRouter({
模式:"历史",
路由:[
{
路径：'/login'，
?name:"log 登录",
title:"登录页面",
组件:登录,
?元：{
登录：true
}
?}
]
});
//控制器 route
router.beforeEach(async(to,from,next)={
/*
某些路由需要登录。
状态
1.无需登录：跳转到登录页面
部分路由不需要登录登录，直接输入ps：是否需要登录--meta
*/
consttoken=localStorage.getItem('toke n');
constisLogin=!!token;
//进入路由时，需要发送令牌发送到后端以验证其是否有效
constdata=awaituserInfo();
Store.commit('chageUserInfo',data.data)
?if(to.matched.some(item=item.meta.login)){//需要登录
console.log("需要登录");
?if(isLogin){//已经登录，继续通过
if(data.error===400){//后台通知您， 登录 失败
next({name:'login'});
localStorage.removeItem('token') ;
return;
}
if( to.name== ='登录'){
next({name:'home'});
}其他{
next();
}
?返回;
？？ ?}
?if(!isLoginto.name==='l ogin'){//未登录，但进入登录页面
? ? next();
}
if(!isLoginto.name!=='login'){//未登录登录，非登录页面
next({name: 'login' });
}
?}else{
?next();
?}
})
exportdefaultrouter;
11|登录前端实现
前端任务点，编写登录请求函数，类似于用户注册，前端获取用户名和密码启动POST请求。
如何持久存储收到的token以及如何在每次请求时携带token是这里的主要。
有关用户登录界面的详细信息，请点击此处。
这里有可以优化的点，以后可能需要添加代码等额外信息验证 目前需要添加函数参数，会很不方便，可以将参数数据格式包装成对象。
当然这里还是采用第一种方法。
这不是我们登录成功后要做的主要事情。
根据接口协议，我们登录成功后可以得到如下信息：
这里我们需要用到token字段 现在我们有了token，但是当我们登录的时候它就没有了刷新它，所以我们要做一些持久化存储，你可以把它存储在任何你想要的地方，只要你能找到它。
这里存储在localStorage中，在Chrome86中，也可以保存到本地文本文件中，但读取速度较慢。
除了token之外，我们还需要存储用户信息，比如首页显示的用户头像等信息。
关于本地信息的安全，本地存储的用户信息不会作为数据请求的凭据，而仅用于显示目的，当用户更改本地用户信息时，不会影响登录状态，因为后端根据token判断token有效，登录成功，不是本地服务器认为你就是你存储用户信息的人，前端不可信。
这种登录方式的危险在于用户的token被盗，但这很难避免，而最不安全的就是人。
。
。
用户信息目前还是未进入登录页面的用户信息，自然无法显示。
很简单，刷新一下就可以了
当页面刷新时，会从localStorage中读取用户信息，并显示当前登录的用户。
。
。
我不想重新加载。
也很简单，设为响应式数据即可。
来吧，来吧 Vuex。
当你在cookie中存储token时，前端不需要主动设置它，默认是携带发送到服务器的，而这里我们存储在Authorization中，所以我们需要提供它，拦截请求并在发送之前添加请求令牌。
好的，我们来回顾一下整个过程。
当用户访问/login时，经过前端路由处理，路由到Login.vue，当用户填写账号时，用户看到登录框，填写自己的账号，姓名密码实时监控，显示的登录按钮影响可操作性 登录按钮只有在用户输入完整的账号密码后才可用。
首页收集用户信息，调用网络中包含的longin请求函数。
后端通过响应中的数据令牌触发突变，成功检查并响应更新 Vuex 中的状态，同时将令牌存储在 localStorage 中，以防止用户关闭页面和导致token丢失。
如果登录成功，会跳转到通过获取的用户头像等信息的首页Vuex 由于 Vuex 中的数据是响应式的，当你从登录跳转到首页时，用户的头像等信息也会相应更新。
当用户添加新文章时，只需将文章数据传输到服务器，后端从请求头中的token中获取文章作者的相关信息。
这里需要注意的是，前端不要使用本地用户信息作为正确的作者信息。
为了最大程度地减少对虚假信息的信任，用户可以完全将本地用户名从张三更改为李四，最终作者应由用户提供的令牌确定。
无密码登录实际上仍然需要“密码”，但它被替换为临时的、不可读的字符串，并且每次您要求时都会为您填写。
在不考虑安全性的情况下，你基本上把密码存储在浏览器中，然后每次访问网站时都要求浏览器帮你输入用户名和密码，这个过程对你来说很麻烦。
这样你就不用像白痴一样每次刷新都填写表格了。
填写表格是一件很无聊的事情。
是时候学习 TypeScript 了。
在后台管理系统工作时，经常需要点击记住密码，然后登录系统，经过多次操作后又退出系统，您希望能够自动记住您的账号和密码。
上次登录 该功能未实现。
记住密码选项的值动态绑定到选中的值上，该值变为 false，选中时会分配一个 true 值，然后登录时通过该值传递帐号和密码。
目前，账户密码是根据其标记的布尔值存储在本地存储中的。
如果为 true，则保存帐户密码。
如果为 false，则其中存储一个空对象。
当用户完成操作后退出时，会返回到登录页面，此时登录组件的生命周期会执行一次，可以将本地存储的值重新赋值给登录页面的表单再次在生命周期中，一旦gus实现了登录时记住密码的功能。
3.1.1。
登录表单
3.1.2从父组件接收的数据
loginForm：账户数据和密码，有勾选：是否选择记住密码？
3. 1.3. 登录表单验证
3.1.4 登录表单深度监控
主要监控登录页面的返回，看表单页面的数据是否填写完毕。
。
如果有数据，则触发监听器，并运行init()方法来初始化表单。
3.1.5。
初始化init
重置布尔值
3.2.1. 子组件介绍
3.2. 判断本地缓存是否有数据，如果有，则在生命周期中在表单项上设置值
3.2.4. 发送按钮的逻辑操作
这部分需要判断是否记住密码被选中，如果选中的话，那么当前的账户密码会被存储为空对象，不仅会清除之前保存的账户和密码，同时也确保下次登录时不会导入数据。
3.2.5 保存用户设置的方法
该方法就是存储用户是否勾选了记住密码的选项
最后一个通用的函数是。
当然，出于安全考虑，最好先将md5加密后再存储到本地（也可以接受其他加密，例如AES加密），然后在安全生命周期中解密并设置值到表单项中。
articleclass="_2rhmJa"
调用登录接口（先说明一下要做什么）
中在前后端完全隔离的情况下，Vue项目中实现token认证的大致思路如下：
1 首次登录时，前端适配后端登录接口并发送用户名和密码。
2. 后端收到请求，验证用户名和密码，如果验证成功，则返回token给前端
localStorage和vuex中3个token，并跳转到路由页面
4 前端每次跳转到路由页面时都会评估localStroage中是否有token到登录页面，如果有则跳转。
进入对应的路由页面
5 每当调整后端接口时，必须在请求头中添加token
6 后端判断请求头中是否有token ，如果有token，则获取token并验证token。
如果认证成功，则返回数据。
如果认证失败（例如：token过期），则返回401，请求头中没有token，则返回401。
7 If 部分前面得到一个状态码 If 401、清除token信息并跳转登录页面
登录接口调用成功，回调函数中会将token存储到localStorage和vuex中
1.template
div
/div
/template
exportdefault{
data(){
} ,
方法：{
///指定是否账号密码 包含，否则会出现警告
}
};
将令牌添加到存储文件夹中的index.js
importVuefrom' vue';
import tVuexfrom'vuex';
Vue.use(Vuex);
conststore=newVuex.Store({
状态：{
},
mutation:{
}
});
exportdefaultstore ;
其次，配置控制器路由导航
router文件夹中的index.js
importVuefrom'vue';
importRouterfrom'vue-router';
importloginfrom '@/components/login';
<importhomefrom'@/components/home';
Vue.use(Router);
constrouter=newRouter({
路线：[
>]
});
//导航控制器
//使用router.be
vue 项目的登陆界面无法跳转主界面问题，如何解决？
当遇到登录界面无法访问Vue项目主界面的问题时，应经常检查以下几个关键环节： 首先，确保路由配置文件（如router/index.js）正确，并且路由配置文件正确。主界面的路由配置必须准确无误，才能保证您登录后能够顺利访问到预期的页面。
其次，检查登录逻辑，确保输入的信息正确，登录成功后正确使用$router.push()方法访问主界面。
另外，检查路由防护是否配置合理，防止非登录用户误访问主界面，并确保已登录用户能够无障碍访问。
同时检查网络请求的状态，确保连接请求成功，后端服务正常响应，响应状态码应为200，且响应正常。
如果有任何问题，请注册。
控制台上的详细信息。
最后，对于使用axios等网络查询库的项目，登录成功后应妥善保存用户信息，并使用$router.push()方法访问主界面。
通过检查上面的链接，确保项目各部分协同工作，可以有效解决Vue项目登录界面无法访问主界面的问题。
