前后端分离如何实现用户鉴权？

Question

背景

前端使用vue框架 + elementui框架，技术使用vue2 + vuecli + vue-router + axios
后端使用springboot框架

需求

用户未登录/登录失败，点左侧任何菜单项右侧均显示请求登录的提示，
用户登录成功，点左侧菜单项显示相关内容

目前情况

已经通过vue-router实现点击菜单项跳转到指定页面，但是未实现对用户是否登录的鉴权

需要解决的困难

在前后端不分离的时候，通常使用后端通过拦截器验证session是否为null判断是否登录成功，若未登录则后端重定向到首页，若已登录则放行
但是对于前后端分离项目，目前不知道如何鉴权并实现未登录自动跳到首页【鉴权目前打算使用token方式，但是不知道怎么拦截未登录用户并重定向到登录界面】

Answer 1

emmmm.... 就很迷，回答被折叠了。那我完整回答一下。

现在主流的前端权鉴是通过动态添加路由实现的前端权鉴，前端的路由表存在数据库中，后端按照当前登录的用户角色返回对应的用户可操作的路由表，然后通过 addRouters 去动态添加到 vue-router 中。
如果你喜欢 element 这个UI库的话，你可以看一下这个 admin 版 👉 Vue-Element-Admin，提供了完整的一套解决方案。
权鉴这部分具体思路可以参考这个文件 permission.js

如果不想自己手撸项目的话，可以直接使用 RuoYi 这个开源后台管理系统，前端是使用的 Vue + ElementUI，但是个人觉得它做的稍微差点意思。一是因为是个人项目维护力度稍微弱一些，二是因为作者是后端er，在对于前端的很多功能设计上面会有一些问题。
我之前是使用的 Jeecg Boot 这个开源项目，也同样有这样的问题。但是维护的力度会稍微好一些，对于不过UI库是 AntDesign of Vue，会比 ElementUI 更好一些，毕竟 Ele 已经算是废弃状态了，但是AntD Vue 可能对于一些对于前端不太熟悉同学会不太友好。

---

如果是已经开发的差不多了的项目，不想再折腾了，其实很简单可以直接在前端做好路由表，然后在路由守卫上添加好一些权鉴的功能。
最简单的实现你的需求 "鉴权并实现未登录自动跳到首页" 的话，直接把登录时返回的token存储在 localStorage 里面就可以，然后再路由守卫中判断一下就好了。

const whiteList = ['/login']

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token")
  if (!!token||whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
}

如果说了除了登录的校验，还需要增加角色权鉴的话，也可以把路由表稍微修一下，把登陆返回的用户角色类型也存起来，例如我早期的一个项目就是这样写的权鉴：

import store from './store'
const agent = {
  path: "/agent",
  name: "agent",
  redirect: "/agent/dashboard",
  component: () => import("views/routerView"),
  children: [
    {
      path: "dashboard",
      name: "agent-dashboard",
      component: () => import("views/agent/dashboard")
    },
    //...
  ],
  beforeEnter: (to, from, next) => {
    // 判断是已经登录 并且 角色名称为 `agent`
    if (store.getters.token && store.getters.role === 'agent') {
      next();
    } else {
      store.dispatch('user/logout')
      next("/login");
    }
  }
};

Answer 2

前后端分离, 肯定是各处理各的.

后端把 需要登录的响应状态发给前端就行了. http状态也行, 响应里面的code也可以.
前端根据后端响应显示登录页面.

Answer 3

后端拦截请求，如果未登录则返回401状态码，前端也要写个拦截器判断响应的状态码是否为401，如果为401则跳转到登录页