公司网站建设合规吗,影响网站排名的因素 权重,wordpress图表插件,google字体 wordpress模拟场景#xff1a;
当用户登录后#xff0c;后台会返回一个token给前端#xff0c;前端下次进入首页后#xff0c;会先判断token是否过期#xff0c;如果过期自动进入登录页面。配置路由#xff1a;
1.安装
npm install vue-router42.安装后在src目录下创建router文…模拟场景
当用户登录后后台会返回一个token给前端前端下次进入首页后会先判断token是否过期如果过期自动进入登录页面。配置路由
1.安装
npm install vue-router42.安装后在src目录下创建router文件夹并创建index.js 代码如下
// vue-router中提供3种的路由模式
import { createWebHistory, createRouter } from vue-router
import { checktoken } from ../request/api;const routes [{path: /,name: home,component: () import(../components/Pages/Home.vue),},{path: /login,name: login,component: () import(../components/Pages/Login.vue),}
]const router createRouter({// 路由的模式history: createWebHistory(),// 路由规则routes
})//导航守卫 导航前做点操作
router.beforeEach(async (to, from, next) {// 编写一个函数来检查 token 是否有效if (to.name home await checkTokenValidity()) {// 如果进入首页且未认证则重定向到登录页next({ name: login });} else {// 其他情况允许通过next();}
});async function checkTokenValidity() {// 获取 tokenconst token localStorage.getItem(token);if (token) {// 使用 分割字符串const arr token.split( );let tokenstr arr[1];return await checktoken({ token: tokenstr })}return true
}export default router
配置axios
1.安装
npm install axios2.在src中创建request文件夹并创建http.js和api.js
3.http.js用于封装axios实例 代码如下
// 在http.js中引入axios
import axios from axios; // 引入axios
import { ElMessage } from element-plusconst config{// url 是用于请求的服务器 URLurl: /api,// baseURL 将自动加在 url 前面除非 url 是一个绝对 URL。// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URLbaseURL: http://localhost:56030/api,// timeout 指定请求超时的毫秒数(0 表示无超时时间)// 如果请求话费了超过 timeout 的时间请求将被中断timeout: 10000,}const requests axios.create(config);//请求拦截器可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) {return config;});//响应拦截器在数据返回之后做一些事情requests.interceptors.response.use((res) {return res.data;},(err) {console.log(err);ElMessage.error(err.response.data)})export default requests;4.api.js用于对接口的统一管理 代码如下
import requests from ./http; //引入二次封装的axios
export const login (params)requests({url:/Account/login ,method:post,data:params});
export const checktoken (params)requests({url:/Account/checktoken ,method:post,data:params});对路由和封装接口的使用
1.登录login.vue组件这里只看用法即可。 代码如下 templateel-card classbox-cardel-text classtitle typewarning sizelargeMetadata科技屋/el-textdiv stylemargin: 40px;/divel-form label-positiontop label-width100px :modelformLabelAlign stylemax-width: 460pxel-form-item label账号el-input v-modelformLabelAlign.accountNumber //el-form-itemel-form-item label密码el-input v-modelformLabelAlign.password typepassword //el-form-itemel-button classloginbut typeprimary clickonSubmit登录/el-button/el-form/el-card
/templatescript setup
import { reactive } from vue
import { login } from ../../request/api;
import { ElMessage } from element-plus
import { useRouter } from vue-router;
const router useRouter();const formLabelAlign reactive({accountNumber: admin,password: 123456
})const onSubmit async () {var token await login(formLabelAlign)if (token) {// 存储 token [Authorize(AuthenticationSchemes Bearer)]localStorage.setItem(token,Bearer token);ElMessage({message: 登录成功,type: success,})// 字符串路径router.push(/);}
}/scriptstyle scoped
.el-card {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}.box-card {width: 480px;height: 320px;
}.title {position: absolute;left: 50%;transform: translate(-50%, -50%);
}.loginbut {float: right;
}
/style
登录成功后的路由跳转需要引用这句代码
import { useRouter } from vue-router;
const router useRouter();// 字符串路径
router.push(/);main.js代码如下
import { createApp } from vue// 图标和组件需要分开引入
import ElementPlus from element-plus; // 引入 ElementPlus 组件import element-plus/dist/index.css
// Element Plus
import element-plus/theme-chalk/index.css // 引入 ElementPlus 组件样式import element-plus/theme-chalk/dark/css-vars.cssimport { Edit } from element-plus/icons-vue // 按需引入 Icon 图标 import router from ./router/indeximport App from ./App.vueconst app createApp(App)
app.use(router)
app.component(Edit, Edit)
app.use(ElementPlus) // 全局挂载 ElementPlus
app.mount(#app)
app.vue代码
scriptexport default {};/scripttemplaterouter-view/router-view
/templatestyle scoped.common-layout
{
height: 100vh;
}
.el-container
{height: 100vh;
}/style
给出main.js代码和app.vue代码可以更方便的看出路由的使用方式。
