This blog is based on Tencent Classroom Teacher Wu "VueCli3 Actual Combat Project-Restoring Ele.me Ordering App (SMS Verification Code Login and Gaode Positioning)". The lectures are very good, if you want to learn, welcome to join.
Create a routing guard in router.js
The role of routing guard, if you are not logged in, other pages you visit will redirect back to the login page by default. I feel it should be available in work.
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'index',
component: () => import('./views/index.vue')
},{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
}
]
})
//路由守卫
router.beforeEach((to,from,next) => {
const isLogin = localStorage.ele_login ? true :false;
if(to.path == '/login'){
next();
}else{
//是否在登录状态下
isLogin ? next() : next('/login');
}
})
export default router;
A login component
<template>
<div class="text_group">
<!-- 组件结构 -->
<!-- 组件容器 -->
<div class="input_group" :class="{'is-invalid':error}">
<!-- 输入框 -->
<input
:type="type"
:value="value"
:placeholder="placeholder"
:name="name"
@input="$emit('input'),$event.target.value"
/>
<!-- 输入框后边的按钮 -->
<button v-if="btnTitle" :disabled="disable" @click="$emit('btnClick')">{
{
btnTitle}}</button>
<!-- 错误提醒 -->
<div v-if="error" class="invalid-feedback">{
{
error}}</div>
</div>
</div>
</template>
<script>
export default {
name: "inputGroup",
props: {
type: {
type: String,
default: "text"
},
value: String,
placeholder: String,
name: String,
btnTitle: String,
disable: Boolean,
error: String
}
};
</script>
log in page
<template>
<div class="login">
<div class="logo">
<img src="../assets/logo.jpg" alt="my login image">
</div>
<!-- 手机号 -->
<InputGroup type='number' v-model='phone' placeholder='手机号' :btnTitle='btnTitile' :disabled="disabled" :error='errors.phone'/>
<!-- 验证码 -->
<InputGroup type='number' v-model='verifyCode' placeholder='验证码' :error='errors.code'/>
<!-- 用户协议 -->
<div class="login_des">
<p>
新用户登录即自动注册,表示已同意
<span>《用户服务协议》</span>
</p>
</div>
<!-- 登录按钮 -->
<div class="login_btn">
<button>登录</button>
</div>
</div>
</template>
<script>
import InputGroup from '../components/inputGroup';
export default {
name:'login',
data(){
return{
phone:'',
verifyCode:'',
errors:{
},
btnTitile:'获取验证码',
disabled:false,
}
},
components: {
InputGroup
}
}
</script>
Page style