什么时候需要登录验证与权限控制
1, 业务系统通常需要登录才能访问受限资源, 在用户未登录情况下访问受限资源需要重定向到登录页面;
2, 多个业务系统之间要实现单点登录, 即在一个系统或应用已登录的情况下, 再访问另一个系统时不需要重复登录; 在登录过期或失效时, 需要重定向到登录页面
如何使用路由守卫
定义一个 index.JS 页面用来定义页面的路由, 代码如下:
- import vue from 'vue'
- import Router from 'vue-router'
- import blogIndex from '@/views/index'
- import loginComponent from '../components/common/login'
- Vue.use(Router)
- const routes = [
- {
- path: '/blog',
- name: 'blogIndex',
- component: blogIndex
- },
- {
- path: '/login',
- name: 'login',
- component: loginComponent
- }
- ];
- const router = new Router({
- mode: 'hash', // mode 的值为 history 的时候不需要 #, 为 hash 的时候需要
- routes
- });
- export default router;
定义一个 guarder.JS 页面用来定义页面的路由, 代码如下:
- import NProgress from 'nprogress'
- import 'nprogress/nprogress.CSS'
- export default function (router) {
- router.beforeEach((to, from, next) => {
- NProgress.start()
- console.log(to.path, '121212');
- if(localStorage.getItem("useName") === 'null' && to.path !== '/login') {
- console.log(to.path, 'totototototototo2');
- next({path: '/login'})
- }else{
- next()
- }
- });
- router.afterEach((to, from) => {
- NProgress.done()
- })
- }
这里使用的方法是当用户登陆的时候将用户名保存到本地, 判断用户名是否存在, 不存在则跳到登陆页面
然后再 main.JS 里面引入 guarder.JS 文件
- // 注入路由守卫
- import guarder from './help/guarder'
- // 注册路由守卫
- guarder(router)
这样在前端就可以达到一个路由拦截的作用
node 配合 http 拦截做 token 认证
要做 token 认证就必须要有 token, 安装 jsonwebtoken 模块, cnpm i jsonwebtoken --save
在 node 的路由模块引入
- var jwt = require("jsonwebtoken");
- // 登陆
- Router.post('/login',function(req,res,next){
- let params = {
- useName: req.body.useName,
- passWord: req.body.passWord,
- };
- userModel.find(params,function(err,doc){
- if(err) {
- res.JSON({
- states: 0,
- msg: err.message
- });
- }else {
- // 下面代码在登陆成功的时候生成 token 并返回给前端, 前端登陆成功后保存到本地
- let token = jwt.sign(params, '123456', {
- expiresIn: 60*60*1 //token 的是时长, 这里的 12345 是密钥, 可以自己定义
- });
- console.log(token, 'tokentokentokentokentoken');
- res.JSON({
- states: 1,
- msg: doc,
- token: token
- });
- }
- }
- });
- });
定义一个 http.JS 文件, 代码如下:
- import axios from 'axios'
- import router from '../router'
- /**
- * 在请求发送数据之前, 对发送数据进行转换
- */
- axios.interceptors.request.use(function (config) {
- // 在这里实现对请求前的处理
- let token = localStorage.getItem("token");
- if(token !== 'null'){
- config.headers.token = token;
- // config.headers.Authorization = `token ${sessionStorage.getItem('token')}`
- }
- // console.log(config,'configconfigconfigconfigconfig');
- return config
- })
- /**
- * 在 Ajax 接收响应数据之前, 进行判断是否响应未登录, 如果未登录重定向到登录页面
- */
- axios.interceptors.response.use(function (res) {
- // 在这里实现响应后的处理
- console.log(res.data.status,'resresresresresresres');
- if(res.data.status === 0) {
- router.replace({
- path: 'login'
- })
- }
- return res
- })
- export default axios
在 main.JS 里面引入 http 模块, 并注入到 vue 实例中
- import http from './help/http'
- new Vue({
- el: '#app',
- router,
- store,
- http,
- components: { App },
- template: '<App/>'
- })
上面代码中 request 部分, 判断是否存在 token, 并将 token 存入请求头里面, 肉厚后端接受这个 token
- // 获取最近登陆
- Router.post('/getNewUser',function(req,res,next){
- console.log(req.headers.token, 'req.headerreq.headerreq.header');
- let params = {};
- let newUser2 = newUserModel.find(params).skip(0).limit(10).sort({_id:-1});
- newUser2.exec(function(err,doc){
- if(err) {
- res.JSON({
- states: 0,
- msg: err.message
- });
- }else {
- let token = req.headers.token; // 从 headers 中获取 token
- // 下面为解密, 判断 token 是否失效, 并返回一个 status 状态
- jwt.verify(token, '123456', function (err, decode) {
- if (err) { // 时间失效的时候 / 伪造的 token
- res.JSON({
- states: 1,
- msg: doc,
- status: 0
- });
- // res.send({'status':0});
- } else {
- res.JSON({
- states: 1,
- msg: doc,
- status: 1
- });
- }
- })
- // res.JSON({
- // states: 1,
- // msg: doc
- // });
- }
- });
- });
上面代码中 response 部分, 接收返回的 status 来判断 token 是否失效, 如果失效则跳到登陆页面
来源: https://www.jb51.net/article/159180.htm