[JavaScript知识库]基于Vue 路由守卫的登录功能

基于Vue 路由守卫的登录功能

登录功能的实现（基于Elementui）

login() {
  //elementui表单的判断,给组件添加refs，通过$refs得到组件，进行登录校验 
  this.$refs.loginFormRef.validate(async (valid) => {
    if (!valid) return
    //data重命名为res
    // 使用await和async解析promise对象
    const { data: res } = await this.$http.post('login', this.loginform)
    if (res.meta.status != 200) return this.$message.error('登录失败')
    this.$message.success('登录成功')
    //保存token
    window.sessionStorage.setItem("token",res.data.token);
    //跳转到指定路由
    this.$router.push("/home");
  })
},

路由导航守卫控制访问权限

需求：

? 如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

操作：

在router.js挂载路由导航守卫

//挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to将要访问的路径
  // from 代表从哪个路由给你跳转而来
  // next 是一个函数，表示放行
  // next() 放行 next("/login")  强制跳转
  if (to.path === '/login') return next();
  //如果不是访问登录页面，证明他访问的是有权限的页面，则需要获取token来进行判断
  const tokenStr = window.sessionStorage.getItem('token');
  if (!tokenStr) return next('/login')
  next();
})