Vue路由前后端设计总结

我来详细讲解一下“Vue路由前后端设计总结”的完整攻略。

一、Vue路由前后端设计总结

本文将介绍如何设计Vue项目的前后端路由，以满足不同页面、不同用户身份不同的访问权限，分为以下几个步骤。

定义路由：编写前端路由文件和后端接口文件；
路由守卫：定义全局路由守卫，并在需要的路由中添加局部路由守卫；
前后端交互：前端调用后端接口，获取用户权限信息；
权限校验：根据用户权限信息进行权限校验。

下面逐一介绍。

二、定义路由

前端路由文件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'
import Admin from '@/views/Admin.vue'
import NotFound from '@/views/NotFound.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin,
      meta: {
        requireAuth: true, // 需要登录权限
        requireRoles: ['admin'] // 需要admin角色权限
      }
    },
    {
      path: '*',
      name: 'notFound',
      component: NotFound
    }
  ]
})

后端接口文件：

const express = require('express')
const router = express.Router()

router.post('/api/login', (req, res) => {
  const { username, password } = req.body
  if (username === 'admin' && password === 'admin') {
    res.send({
      code: 0,
      data: {
        token: 'admin_token',
        roles: ['admin']
      },
      msg: ''
    })
  } else if (username === 'user' && password === 'user') {
    res.send({
      code: 0,
      data: {
        token: 'user_token',
        roles: ['user']
      },
      msg: ''
    })
  } else {
    res.send({
      code: 1,
      data: null,
      msg: '用户名或密码错误'
    })
  }
})

module.exports = router

三、路由守卫

全局路由守卫：

import router from '@/router'

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 需要登录权限
    const token = sessionStorage.getItem('token') // 从本地存储中获取token
    if (token) {
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

局部路由守卫：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['userInfo'])
  },
  beforeRouteEnter (to, from, next) {
    if (to.meta.requireRoles.includes(this.userInfo.role)) { // 需要角色权限
      next()
    } else {
      next('/not-found')
    }
  }
}

四、前后端交互

调用后端接口获取用户信息：

import axios from 'axios'

export const login = (username, password) => {
  return axios.post('/api/login', { username, password })
}

五、权限校验

存储用户信息并跳转页面：

import { login } from '@/api/user'
import router from '@/router'

export default {
  methods: {
    handleSubmit () {
      login(this.form.username, this.form.password).then(res => {
        const data = res.data
        if (data.code === 0) {
          sessionStorage.setItem('token', data.token)
          sessionStorage.setItem('userInfo', JSON.stringify(data))
          router.push('/')
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}

六、示例说明

假设用户访问/admin页面，需要管理员身份才有权限。前端定义/admin路由时，设定了requireAuth和requireRoles两个meta属性，后端定义了roles属性存储用户角色信息。全局路由守卫判断requireAuth为true时，先从sessionStorage中获取token，如果token存在，则允许访问，否则跳转至登录页。局部路由守卫判断requireRoles是否包含当前用户角色，若包含则允许访问，否则跳转至404页面。
假设用户访问/user页面，需要普通用户身份才有权限。前端定义/user路由时，设定了requireAuth和requireRoles两个meta属性，后端定义了roles属性存储用户角色信息。全局路由守卫判断requireAuth为true时，先从sessionStorage中获取token，如果token存在，则允许访问，否则跳转至登录页。局部路由守卫判断requireRoles是否包含当前用户角色，若包含则允许访问，否则跳转至404页面。