router的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
if (to.path === '/login') next()// 放行
else {
const tokenStr = sessionStorage.getItem('token')
if (!tokenStr) next('/login') // 强制放行
next()
}
})
export default router
Login.vue的script部分
<!-- 行为区域 -->
<script>
export default {
data() {
return {
loginForm: {
username: 'admin',
password: '123456'
},
loginRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在3-10个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 5, max: 20, message: '长度在5-20个字符', trigger: 'blur' }
]
}
}
},
methods: {
resetLoginForm() {
this.$refs.loginFormRef.resetFields()
},
loginCheck() {
this.$refs.loginFormRef.validate(async (valid) => {
if (!valid) return
const res = await this.$http.post('login', this.loginForm)
console.log(res.data.meta.msg)
console.log(res.data.meta.status)
console.log(res.data)
if (res.data.meta.status === 200) {
// 提示登录信息
this.$message({
showClose: true,
message: '登录成功',
type: 'success'
})
// token保存到sessionStorage,localStorage是持久化
window.sessionStorage.setItem('token', res.data.data.token)
this.$router.push('/home')
} else {
this.$message({
showClose: true,
message: res.data.meta.msg,
type: 'error'
})
}
})
}
}
}
</script>
效果
没有登录时只能访问login页面,登录保存用户token后才可以访问其他页面