关于 Vue.js 登录跳转的问题

XBodhi. 研发经理,系统架构师,高级软件工程师  2020-07-06 04:19:45
最近在了解 VUE.js 遇到一个问题,找了很多资料依然无法解决

问题说明:

有一个登录页面,名称 Login.vue
有一个 main.js 主文件
有一个 app.Vue 基础文件

public\index.html 有 div id="app"


需要实现:登录页面登录后用路由 router.push("Home")

代码如下:

Login.vue

<template>
<div class="p-grid login">
<div class="p-col-3">
<div class="card card-w-title">
<h1 style="text-align: center">登录</h1>
<div>
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-user" />
</span>
<InputText v-model="userInfo.userName" placeholder="用户名" />
</div>
</div>
<div class="p-col-12">
<div class="p-inputgroup">
<span class="p-inputgroup-addon">
<i class="pi pi-lock" />
</span>
<Password v-model="userInfo.password" placeholder="密码"></Password>
</div>
</div>
<div class="p-col-12" style="text-align: center">
<Button @click="onLogin" label="登录" style="margin-bottom: 10px" />
</div>
</div>
</div>
</div>
</div>
</template>



<script>
import AccountService from "../services/accountService";

export default {
name: "Login",
accountService: null,
data() {
return {
userInfo: {
userName: null,
password: null
}
};
},
created() {
this.accountService = new AccountService();
},
mounted() {},
methods: {
onLogin: function() {
this.userInfo.password = this.$Md5(this.userInfo.password);
this.accountService.login(this.userInfo).then(data => {
this.$Cookie.set("cese2_u", data, { expires: 1 });
});
}
}
};
</script>

<style scoped>
.login {
display: flex;
justify-content: center;
}
</style>>



main.js

import Vue from 'vue'
import Login from './views/Login.vue'
//import App from './App.vue'

Vue.config.productionTip = false;

import InputText from "primevue/inputtext"
Vue.component('InputText', InputText);
import Password from "primevue/password"
Vue.component("Password", Password)
import Button from "primevue/button"
Vue.component("Button", Button)
import Column from "primevue/column"
Vue.component("Column", Column)
import DataTable from "primevue/datatable"
Vue.component("DataTable", DataTable)
import Dialog from "primevue/dialog"
Vue.component("Dialog", Dialog)
import Textarea from "primevue/textarea"
Vue.component("Textarea", Textarea)
import Dropdown from 'primevue/dropdown';
Vue.component("Dropdown", Dropdown)
import RadioButton from 'primevue/radiobutton';
Vue.component("RadioButton", RadioButton)
import InputMask from "primevue/inputmask";
Vue.component("InputMask", InputMask);
import InputNumber from "primevue/inputnumber";
Vue.component("InputNumber", InputNumber);



//导入样式表
import 'primevue/resources/themes/nova-accent/theme.css';
import 'primevue/resources/primevue.min.css';
import 'primeflex/primeflex.css';
import 'primeicons/primeicons.css';
import 'prismjs/themes/prism-coy.css';
// import '@fullcalendar/core/main.min.css';
// import '@fullcalendar/daygrid/main.min.css';
// import '@fullcalendar/timegrid/main.min.css';
import './assets/layout/layout.scss';

//导入路由
import router from "./router.js"
Vue.prototype.$Router = router;

//导入MD5
import Md5 from "js-md5";
Vue.prototype.$Md5 = Md5;

//导入 Cookie
import Cookie from "js-cookie";
Vue.prototype.$Cookie = Cookie;

import axios from 'axios'
if (process.env.NODE_ENV == 'development') {
console.log("开发版本")
//设置 API基础地址
axios.defaults.baseURL = "https://localhost:5001/api";
} else if (process.env.NODE_ENV == 'production') {
console.log("上线版本");
//设置 API基础地址
Vue.prototype.$apiUrl = "https://localhost:5001/api";
}

//http 拦截器
axios.interceptors.response.use(
res => {
//对响应数据做些事
if (this.Cookie.get("cese2_u") === null) { // 这里根据自己接口返回状态进行判断是否需要登录
console.log("未登录")
router.push({
path: '/login',
query: {
redirect: location.hostname // 防止从外部进来登录
}
})
}
else {
console.log("已登录:" + this.Cookie.get("cese2_u"));
}
return res.data;
},
error => {
let errorInfo = error.data.error ? error.data.error.message : error.data;
return Promise.reject(errorInfo);
}
);

//路由 login 跳转
// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
console.log('需要登录');
//if (localStorage.token) { // 判断当前的token是否存在 ; 登录存入的token
let s = true;
if (s) {
next();
}
else {
next({
path: '/',
query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}
});


new Vue({
router, //挂载路由
render: h => h(Login),
}).$mount('#app')


...全文
136 点赞 收藏 1
写回复
1 条回复
XBodhi. 2020年07月06日
取消 登录在右侧显示,
回复 点赞
发动态
发帖子
C#
创建于2007-09-28

8.5w+

社区成员

64.0w+

社区内容

.NET技术 C#
社区公告
暂无公告