目录token可用于登录验证和权限管理。登录页 -----Login.Vue路由守卫 ----- router/index.js封装axiOS 添加请求拦截器 在每次请求之前进行的操
大致步骤分为:
<template>
<!-- 登录 -->
<div>
<el-container>
<el-main>
<div class="box">
<el-fORM
:model="user"
:rules="rules"
ref="user"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="email">
<el-input v-model="user.email"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="passWord" v-model="user.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</el-main>
</el-container>
</div>
</template>
<script>
import {LoginPostData} from '../../api/index' // 后端登录接口
export default {
data() {
return {
rules: {
email: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
},
user:{
email:'',
password:''
},
userToken:'', // 用于存储从后台获取的token
};
},
methods:{
login(){
// 登录接口
LoginPostData(this.user.email,this.user.password)
.then((res)=>{
// 将token存到userToken中
this.userToken = res.data.data.token
// 将token本地存储到回话中
localStorage.setItem('token', this.userToken);
// 如果code为200则跳转到NewReport页面
if(res.data.code === 200){
this.$router.push({name:'NewReport'})
this.$message({
message: '恭喜你,登录成功',
type: 'success'
});
}else{
this.$message.error(res.data.data);
}
})
.catch(err=>{
console.log(err);
})
}
},
};
</script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
// 登录页
{
path: '/',
name: 'Login',
component: ()=>import('../views/Login/Login.vue'),
},
// 首页
{
path: '/Home',
name: 'Home',
component: ()=>import('../views/Home/Home.vue'),
children:[
// 新建报表
{
path:'/Home/NewReport',
name:'NewReport',
component:()=>import('../views/Home/NewReport.vue')
},
]
},
]
const router = new VueRouter({
routes
})
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆
router.beforeEach((to, from, next) => {
//如果去往登录页则放行
if (to.path === '/') {
next();
} else {
// 从本地存储里获取token
let token = localStorage.getItem('token');
// 判断token是否为空如果为空则跳转到登录页 如果有则放行
if (token === null || token === '') {
next({path:'/'});
} else {
next();
}
}
});
export default router
在请求头中添加token ---- api/request.js
// 请求
import axios from 'axios'
// create an axios instance 创建axios实例
const instance = axios.create({
baseURL: 'Http://192.168.3.6:8082', // api 的 base_url
withCredentials: false//跨域时使用凭证,默认带上cookies
// timeout: 2000, // request timeout 设置请求超时时间
})
// 添加请求拦截器,在请求头中加token
instance.interceptors.request.use(
config => {
//判断token是否存在
if (localStorage.getItem('token')) {
// 在请求头中添加token
config.headers.token = localStorage.getItem('token');
}
return config;
},
error => {
return Promise.reject(error);
});
export default instance
注意:
鬼知道我当时为了这个找了多半天 哭死
<template>
<div>
<el-link icon="el-icon-switch-button" @click="tuichu">退出登录</el-link>
</div>
</template>
<script>
export default {
methods: {
// 退出
tuichu() {
//退出登录,清空token
localStorage.removeItem('token');
this.$router.push({ name: "Login" });
},
},
};
</script>
到此这篇关于vue实现token登录验证的文章就介绍到这了,更多相关vue token登录验证内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue实现token登录验证的完整实例
本文链接: https://www.lsjlt.com/news/146957.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0