7.登录成功跳转页面
创建一个Home.vue组件
然后配置路由
导入组件
import Home from '../views/Home.vue'
为组件添加路由信息
{
path: '/home',
name: 'Home',
component: Home
}
为登录页添加跳转到Home的链接
postRequest("/login", this.loginForm).then((resp) => {
// 转换接收json格式
// alert(JSON.stringify(resp));
// 判断resp是否存在,如果不存在,可能被拦截器拦截
if (resp){
// 定义token,拿到请求后端的token
const tokenStr=resp.obj.tokenHead+resp.obj.token;
// 存在,则路由跳转
/*
replace:替换页面,不可以通过后退按钮回到上一页面
push:跳转页面,可以通过后退按钮回到上一页面
*/
this.$router.replace('/home');
}
});
要在请求头上添加token值来验证
所以在api中写入请求拦截器
api.js
// 请求拦截器
axios.interceptors.request.use(config => {
// 判断例如Login页中102行是否存储进用户token值
if (window.sessionStorage.getItem('tokenStr')) {
// 存在token,之后请求头就会带上这个token
config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');
}
return config;
}, error => {
console.log(error);
})
完善api拦截器
// 传送json的get请求拦截器
export const getRequest = (url, params) => {
return axios({
method: 'get', //设定格式
url: `${base}${url}`,
data: params
})
}
// 传送json的delete请求拦截器
export const deleteRequest = (url, params) => {
return axios({
method: 'delete', //设定格式
url: `${base}${url}`,
data: params
})
}
添加登录页面的登录按钮加载动画效果,详细请看element文档
<el-form v-loading="loading" element-loading-text="正在登陆..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" ref="loginForm" :model="loginForm" :rules="rules" class="loginContainer">
if (valid) {
// 点击完登录按钮后显示加载效果
this.loading=true;
if (resp) {
// 登录完成后关闭登录按钮加载效果
this.loading=true;
全局配置请求方式引用
在main.js中引入请求依赖
// 引入请求依赖
import { deleteRequest, getRequest, postRequest, putRequest } from "@/utils/api";
然后在main.js中用组件的方式进行全局配置
// 用组件的方式进行全局配置
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.deleteRequest = deleteRequest;
之后使用请求方式的时候只需要前面加上this,使用的就是main中全局配置的请求方式了
this.postRequest("/login", this.loginForm).then((resp) => {
前端页面停留在视频41导航菜单功能实现,因登录页没有后台链接,所以无法继续进行
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 Eternal Night
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果